Buttons

Interactive elements that enable users to trigger actions.

Overview

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like dialogs, forms, cards, and toolbars. Buttons should be clearly labeled and easy to find, with a visual style that indicates their level of importance.

Variants

Buttons come in several variants, each designed for a specific purpose.

Primary Button

Primary buttons are high-emphasis buttons. They contain actions that are primary to your app.

Example

Secondary Button

Secondary buttons are medium-emphasis buttons. They contain actions that are important but not the primary action in an app.

Example

Tertiary Button

Tertiary buttons are low-emphasis buttons. They contain actions that are useful but less important.

Example

Sizes

Buttons come in different sizes to accommodate different contexts.

Example

States

Buttons can have different states to indicate their current status.

Example

Usage

Here are some examples of how to use buttons in different contexts:

Card Title

Card content goes here...

Example

Best Practices

Do

Use clear, action-oriented labels
Use primary buttons for the main action
Position buttons in a consistent location
Use appropriate button sizes for different contexts
Ensure buttons have sufficient contrast

Don't

Use too many buttons in one section
Use vague or generic labels like "Click Here"
Use primary buttons for destructive actions
Place buttons too close together on touch interfaces
Use buttons when links would be more appropriate