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.

check_circle

Do

Use progressive disclosure to reveal less relevant actions.

cancel

Don't

Overwhelm the user’s view with too many buttons.

check_circle

Do

Use buttons to prompt an action. Or use a title chip for a static element.

cancel

Don't

use a button as a static decorative element.

Anatomy

Customization

Buttons contain a default and large variation, along with default, focused, and pressed states for each. Icons can be used to give greater emphasis, clarification, and recognition to the button. Button size can help emphasize importance.