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.