Button

Buttons are clickable elements used to trigger actions. They are visual calls to action, with labels expressing what action will occur when the user interacts with it.

When to use

Use for actions

Employ buttons for clear actions, like submitting forms or confirming decisions

Use for actions

Employ buttons for clear actions, like submitting forms or confirming decisions

Use for actions

Employ buttons for clear actions, like submitting forms or confirming decisions

Clear calls to action

Guide users on what actions are available to them in the interface

Clear calls to action

Guide users on what actions are available to them in the interface

Clear calls to action

Guide users on what actions are available to them in the interface

Navigation

Use buttons for guiding users through navigation or multi-step processes

Navigation

Use buttons for guiding users through navigation or multi-step processes

Navigation

Use buttons for guiding users through navigation or multi-step processes

When to avoid

Decoration

Don't use buttons solely for decoration; reserve them for functional actions

Decoration

Don't use buttons solely for decoration; reserve them for functional actions

Decoration

Don't use buttons solely for decoration; reserve them for functional actions

Ambiguity

Avoid buttons with unclear labels or ambiguous actions to prevent user confusion

Ambiguity

Avoid buttons with unclear labels or ambiguous actions to prevent user confusion

Ambiguity

Avoid buttons with unclear labels or ambiguous actions to prevent user confusion

Overuse

Don't overuse buttons; choose appropriate UI elements like links if navigating users outside of the application

Overuse

Don't overuse buttons; choose appropriate UI elements like links if navigating users outside of the application

Overuse

Don't overuse buttons; choose appropriate UI elements like links if navigating users outside of the application

Specifications

Styles

Solid

The Solid Button is intended to be your Primary Action Button. Use it for the single, most important action on any screen

Outline

The Outline Button is intended to be your Secondary Action Button. Use it for less prominent actions or actions that complement the primary one without competing visually.

Ghost

Use it for non-critical, supporting functions where visual hierarchy must be minimal, actions that repeat frequently, or secondary navigation items.

Solid

The Solid Button is intended to be your Primary Action Button. Use it for the single, most important action on any screen

Outline

The Outline Button is intended to be your Secondary Action Button. Use it for less prominent actions or actions that complement the primary one without competing visually.

Ghost

Use it for non-critical, supporting functions where visual hierarchy must be minimal, actions that repeat frequently, or secondary navigation items.

Solid

The Solid Button is intended to be your Primary Action Button. Use it for the single, most important action on any screen

Outline

The Outline Button is intended to be your Secondary Action Button. Use it for less prominent actions or actions that complement the primary one without competing visually.

Ghost

Use it for non-critical, supporting functions where visual hierarchy must be minimal, actions that repeat frequently, or secondary navigation items.

Sizes

Default

Small

Default

Small

Default

Small

Content

Text-only

Icon + Text

Text + Icon

Icon + Text + Icon

Icon

Text-only

Icon + Text

Text + Icon

Icon + Text + Icon

Icon

Text-only

Icon + Text

Text + Icon

Icon + Text + Icon

Icon

Text-only

Icon + Text

Text + Icon

Icon + Text + Icon

Icon

Anatomy

Container

Contains all of the button content, including the icon and label.

Icon

Icons can be used to help aid text by creating visual cues to the button’s action verb or noun. Use only one icon (on the left or right) to keep consistency throughout the application.

Text

Text or button label can be removed if an icon only button is desired. Use icon only buttons if the icon is easily recognizable universally.

Trailing icon

Trailing icons can be used to signal navigation/action direction.

Value

Button