Menu Icon

Button

A button triggers an event or action. They let users know what will happen next.

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.