Status
Our components have different statuses depending on how they are used. This table shows all the variations of the button according to its behaviour.
Default button
|
|
Primary |
Secondary |
Tertiary |
|
Active It’s the button default status. The action promoted by the button is available. |
|
|
|
|
Hover When a user hovers over a button with its mouse. |
|
|
|
|
Focus When a user hovers over button with its mouse. |
|
|
|
|
Disable When a button is not active and the action can’t be completed. |
|
|
|
Delete button
|
|
Primary |
Secondary |
Tertiary |
|
Active It’s the button default status. the action promoted by the button is available. |
|
|
|
|
Hover When a user hovers over a button with its mouse. |
|
|
|
|
Focus When a user selects a button with a keyboard or a screen reader |
|
|
|
|
Disable When a button is not active and the action can’t be completed |
|
|
|
Size
We have two different sizes of button:
Default button
Primary button
Use a primary button to call attention to an action on a form or to highlight the strongest call to action on a page.
|
Default |
Hover |
Disable |
Secondary button
Use a secondary button for any secondary action on a page, or with a main button for secondary actions.
|
Default |
Hover |
Disable |
Tertiary button
The tertiary button is usually used for low-priority action, when we have repetitive actions or when there is a high number of actions in the same component.
|
Default |
Hover |
Disable |
Danger button
Danger buttons are used for destructive actions. Danger buttons are available in default and compact sizes, and in primary, secondary and tertiary versions.
