Button
The Button widget is a fundamental interactive element that allows users to trigger actions within your application. It provides extensive customization options for appearance, states, and behavior, making it suitable for various use cases from simple navigation to complex form submissions.
Buttons are essential for user interactions and can be styled to match your application's design language while providing clear visual feedback for different states.
Customizing Button
The Button widget provides comprehensive customization options organized into several sections:
Interactions: Define what happens when users interact with the button
State: Control the button's enabled/disabled state and visual preview
Button Shape: Customize the button's shape, borders, and overall form
Default State: Configure the button's appearance in its normal state
Disabled State: Define how the button appears when disabled
Typography: Control the text content and styling
Icons: Add leading and trailing icons to enhance the button's visual appeal
Interactions Properties
on Click
Defines the action that executes when users click the button. Can trigger navigation, API calls, or other interactive behaviors.
State Properties
Button State
Visual preview control for the builder interface. Toggle between Default and Disabled to see how the button appears on the canvas.
Is Disabled
Boolean property that controls whether the button is functionally disabled. Can be a static value or dynamic expression.
Button Shape Properties
Shape
Defines the button's geometric shape. Options include Stadium, Circle, and RoundedRect.
Border Radius
Controls corner rounding when Shape is set to RoundedRect. Allows individual corner customization.
Eccentricity
Adjusts the oval shape when Shape is set to Circle. Higher values create more elliptical shapes.
Border Style
Defines the border appearance. Options are Solid for visible borders or None for no border.
Border Color
Sets the color of the border when Border Style is Solid.
Border Width
Controls the thickness of the border when Border Style is Solid.
Default State Properties
These properties control the button's appearance in its normal, interactive state.
Button Color
The background color of the button in its default state.
Elevation
Creates a shadow effect to give the button depth and visual prominence.
Shadow Color
The color of the elevation shadow effect.
Alignment
Controls how the button's content (text and icons) is aligned within the button bounds.
Padding
Internal spacing around the button's content. Can be set individually for top, right, bottom, and left.
Height
The vertical size of the button. Can be fixed or responsive.
Width
The horizontal size of the button. Can be fixed or responsive.
Disabled State Properties
These properties define how the button appears when it's disabled (non-interactive).
Button Color
The background color of the button when disabled.
Text Color
The color of the button's text when disabled.
Icon Color
The color of the button's icons when disabled.
Typography Properties
The Button widget includes text content and styling options similar to the Text widget.
Content Properties
Value
The text content displayed on the button.
Text Styling Properties
Text Style
Controls the font styling. Can be linked to predefined text styles or customized individually. Text Style Properties
Max Lines
Limits the number of lines for the button text. If empty, the text will expand as needed.
Alignment
Aligns text horizontally within the button (left, center, right, justify).
Overflow
Controls how text overflows when it exceeds the available space. Options include clip, fade, ellipsis, visible, marquee.
Icons Properties
The Button widget supports both leading (left) and trailing (right) icons to enhance visual communication.
Default Properties
The Button widget supports limited default properties:
Alignment— Controls the button's alignment within its parent containerVisibility— Controls whether the button is visible or hidden
Last updated