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 Use a primary button to call attention to an action on a form or to highlight the strongest call to action on a page. |
Secondary Use a secondary button for any secondary action on a page, or with a main button for secondary actions. |
Tertiary 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. |
|
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. |
|
|
|
|
Disable When a button is not active and the action can’t be completed. |
|
|
|
|
|
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. |
|
|
|
|
Disable When a button is not active and the action can’t be completed. |
|
|
|
Delete button
|
|
Primary Use a primary button to call attention to an action on a form or to highlight the strongest call to action on a page. |
Secondary Use a secondary button for any secondary action on a page, or with a main button for secondary actions. |
Tertiary 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. |
|
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. |
|
|
|
|
Disable When a button is not active and the action can’t be completed |
|
|
|
Neutral button
|
|
Primary |
|
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. |
|
|
Disable When a button is not active and the action can’t be completed |
|
Premium button
|
|
Primary Use a primary button to call attention to an action on a form or to highlight the strongest call to action on a page. |
Secondary Use a secondary button for any secondary action on a page, or with a main button for secondary actions. |
Tertiary 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. |
|
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. |
|
|
|
|
Disable When a button is not active and the action can’t be completed |
|
|
|
Size
We have two different sizes of button:
Dropdown combination
In some cases, the button can be combined with a dropdown to allow a user to choose an action to perform in a specific context. In this case, it integrates the ‘contextual menu’ component.