Button

Style

A button is clickable text or an icon that triggers an action on the page or in the background. Depending on the action, content, and hierarchy, a button can be used on its own or grouped with other buttons.

Anatomy

1. Text
2. Container
3. Border
4. Text only
5. Icon
6. Icon background
7. Icon only

Theme

Buttons are available in both light and dark themes.

Light and dark themes

Configuration

All buttons with a container have the same height and border radius, but the width varies based on the amount of content. Buttons in a row are all horizontally centered. When a Play button is placed on an image, it is both horizontally and vertically centered and stays the same size no matter how big or small the image gets.

Space

Space values are the same on all breakpoints for the following buttons. To see space values when buttons are grouped, go to the Guidelines page.

Helpful tip

Buttons include a custom 6px spacer, do not use it anywhere else.

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern.

Hover

Focus

Helpful tip

The Focus state has the same styles as the Hover state.

Active

Helpful tip

The Active state has the same styles as the Hover state.