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.

Did this answer your question?