Anatomy
|
Item |
Name |
Description |
Optional |
|---|---|---|---|
|
1 |
Container |
Holds the Button content. |
- |
|
2 |
Start Icon |
Optional icon that adds context to an action and draws attention to the Button. |
Yes |
|
3 |
Text |
The text label attributed to the Button to provide content. |
- |
|
4 |
End Icon |
An icon used solely in a Button that triggers a dropdown. |
Yes |
|
5 |
Counter |
A Badge showing the number of items related to the Button's action, e.g., "Delete (9)" indicates deleting 9 selected items. |
Yes |
Specification and properties
Variants
|
Variant |
Description |
|---|---|
|
Primary |
Used for the main action on a page. Only one Primary Button should appear per screen (excluding Appbar, Dialog, or Side Panel). |
|
Secondary |
It represents extra actions. It can only be used alongside a Primary Button, never in isolation. |
|
Tertiary |
For less prominent actions. It can be used alone or with a Primary Button for complementary actions like "Cancel." |
|
Ghost |
For subtle, less noticeable actions. It can be used alone or with other buttons in a group. |
|
Destructive |
For destructive actions, such as deleting or removing data. It should be used with caution. |
Size
|
Size |
Height |
Token |
|---|---|---|
|
Small |
32px |
sizing.400 |
|
Medium |
40px |
sizing.500 |
|
Large |
48px |
sizing.600 |
|
Extra Large |
56px |
sizing.700 |
States
|
Item |
State |
Description |
|---|---|---|
|
1 |
Default |
The initial state of the button. It represents its default appearance before any interaction takes place. |
|
2 |
Hover |
The state that is displayed when a user hovers the cursor over the button, indicating the component is interactive. |
|
3 |
Active |
Represents when the button is being pressed or clicked. |
Spacing
|
Variant |
Property |
Value |
Token |
|---|---|---|---|
|
Small |
Side Padding |
12px |
spacing.150 |
|
|
Gap |
8px |
spacing.100 |
|
Medium |
Side Padding |
16px |
spacing.200 |
|
|
Gap |
12px |
spacing.150 |
|
Large / Extra Large |
Side Padding |
24px |
spacing.300 |
|
|
Gap |
12px |
spacing.150 |
Disabled
The Disabled property indicates that a Button is inactive but may become interactive if specific conditions are met.
When hovered, a disabled Button does not respond to clicks, and the cursor remains the default arrow instead of the interactive pointer.
Loading
The Loading property represents an action that takes a few seconds to process after user interaction. A loading indicator replaces the text to provide visual feedback. Icons and counters are not displayed while loading.
Optional elements
|
Item |
Name |
|---|---|
|
1 |
Start Icon |
|
2 |
End Icon |
|
3 |
Counter |