Button

Figma | Storybook

Overview

Buttons tell users what actions are available and allow them to perform those actions.

Behaviors

Focus A focus state replaces the browser default focus state for buttons.

Disabled Use disabled buttons sparingly — they’re not accessible. Instead, keep the button selectable and use validation and error messages to explain what a user needs to do to move forward.

Only use disabled buttons if the entire form is disabled, meaning the user cannot interact with any field.

Or if the control the button is attached to is also disabled, like when number fields reach their data limit. Again, use an informative message to explain why the control is disabled.

Disabled buttons should have 50% opacity.

Variations

Primary

Primary buttons draw attention to an action. There can be multiple of these buttons on a single application page, but they work best when there is only one primary button in a group of actions.

Secondary

Secondary buttons are used with primary buttons to show other actions the user can do.

Tertiary

Tertiary buttons are for lesser-performed actions, those that users are unlikely to perform.

Danger

Danger buttons warn users about the button action. They are used for permanent or destructive actions.

Primary text

Text buttons are used in containers with very little content, so they don't blend into normal text. There should only be one primary text button.

Secondary text

Like filled buttons, text buttons can be primary and secondary. Secondary text buttons show users alternative actions they can take that aren’t the “main” or expected outcome. Secondary text buttons are distinguished from primary by being a different color.

Text with icon

Text buttons with icons can have icons to the left of right of the label. Their label is sentence case instead of all uppercase or title case.

Icon only

Buttons that are only an icon have a rounded hover and focus state but no label.

Usage guidelines

Content guidelines

Button text should tell a user exactly what will happen when they select it. Be specific.

👍

Try this

Retry Scan

❗️

Not this

Learn More

Most buttons should be 2 words. The first word should be a verb, and the second one a noun. The exception is commonly recognized buttons like OK, Cancel, and Dismiss. Avoid unnecessary filler words and articles like “the” or “a”. If there’s a third word, it should be descriptive to increase understanding.

👍

Try this

Create Connector

❗️

Not this

Create a New Connector

Use verbs that are inclusive of all users and devices. Avoid “see” and “click”.

👍

Try this

• View Detections
• Select

❗️

Not this

• See Detection
• Click

Wrapping

Buttons wrap to the next line when they don't have space to be on the same line.

Related

Referenced in this section:

Icon component

Typography guidelines

Components and patterns that use buttons:

Colors guidelines

Data grid component

Date picker component

Filter pattern

Modal component

Menu component

Time picker component