Usage
Clarity comes with six different types of buttons to use. They provide 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 behaviors 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.
