Button
Examples
- Buttons should always have a label, except when using a universally understood and accessible icon.
- Optional icons should not be used for decoration and should only be included when necessary and strongly associated with the label text.
- The label can be hidden to create an icon-only button, with a tooltip providing the label when necessary.
Usage
- Use Medium size for default interface, while you can use the small version for mobile or inside other interface elements (such as Callout, Tables, …)
- Use a button group to show additional actions.
- When the button label is not visible, a tooltip will appear when the user hovers over the button. The tooltip will show the label text and, if applicable, a keyboard shortcut.
Primary
Primary buttons are used for the main action on a page.
Secondary
Secondary buttons are used for secondary actions on each page. There can be multiple secondary buttons on a page.
When the background is dark use the Button Solid
Anatomy
Default Button should be used only on light backgrounds (white or light grey). In case you have dark background use Button Solid.
How to use
Button has a range of styles that cater to different needs. They are designed to highlight where users need to take action in order to proceed through a process.
When to use
- Use icons only when necessary
- Be concise and use verbs for the labels
When not to use
- Never use capitalization to emphasize a specific button.
- Do not use buttons as navigational elements. Instead, use Links when the desired action is to take the user to a new page.
Danger Button
Examples
Danger button has only one style and it can be used with or without the icon as the other Buttons.
Anatomy
Danger Button has the same anatomy of the default Button
When to use
- For actions that could have destructive effects on the user’s data (for example, delete or remove).
- Use in confirmation modal
When not to use
- Do not use on solid background.
- Avoid having many danger buttons thatoverwhelms the page.
Accessibility
Press the Space or Enter key to execute the button action. The button will remain in focus, unless it opens or closes a container, in which case the focus will move to the target or back to the caller.