Buttons

Buttons are the primary visual indicator for a user's actions.

Principles

Action-Oriented: Buttons should clearly communicate that they trigger an action.

Clear Feedback: The button's appearance must change distinctly across different interaction states (hover, press, focus) to provide immediate feedback.

Consistent: All buttons should share a core visual language to be instantly recognizable.

Flexible: The button component should accommodate common variations, such as including icons and different sizes, without sacrificing consistency.

Usage & Placement

A button should be placed closely to its relevant content. They can be placed alone or with other components, like cards and lists.

Icon buttons

Icon buttons are available to reduce content density. Use icon buttons when the icon clearly illustrates an action, otherwise include a button label.

Toggable

For actions with boolean states, like favorite, a toggle variant is available for each button type. Swapping icons in between toggle states makes the interaction glanceable and responsive.

Anatomy

Buttons are composed of a label and optional icon leading or trailing icon.

Icon buttons are composed of only a recognizable icon.

Both have a togglable variant.

Customization

Buttons contain a default and large style. Large size can help emphasize importance.

Icons can be used to give greater emphasis, clarification, and recognition to the button in a trailing or leading position.