Usage
Clarity comes with six different types of buttons to use. They provide to give visual distinction between the priority or hierarchy of the buttons in the application.
Guidance
- Buttons should indicate an action.
- They should be discoverable, easy to identify, and specific.
- Always have a text label within the button container. Icons are optional.
- Make Buttons look and feel clickable.
- If using multiple Buttons, style and label them distinctly.
When to use
- Use Buttons to emphasize a call-to-action.
When not to use
- Consider using an Icon Button in dense environments.
- Consider using Text Buttons for actions that are less important.
- Consider using an Action Bar when presenting the user with one or more high or medium-high actions specific to a task.
Variations
- There are several types of Buttons with varying degrees of emphasis. Emphasis determines a Button’s appearance and placement.
- The updatable properties of Buttons are icon, type, shape and size.
- The updatable behaviours of Buttons are ghost, block, disabled, hoverable, showing tooltip and popover.
- The updatable style features of Buttons are display, margin, padding, size, overflow, typography, background, border, effects and css.
- The updatable style features of Button Icons are margin, padding, typography, border, effects and css.
- The usable dynamic properties of Buttons are disabled, icon, shape, size, type, block, href, target, _label, hidden and style.