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.