Button

Usage

A button carries out an action on the current screen. Use the type to signal how much weight the action carries, so a screen has one clear primary action and any supporting actions sit below it in emphasis.

Design properties

Types

Filled

Use for the primary action on a screen or in a section. Limit it to one at a time.

Outlined

Use for a secondary action that sits alongside a filled button.

Destructive

Use for actions that delete content or can’t be undone.

Text

Use for the lowest-emphasis action, where a filled or outlined button would draw too much attention.

Behavior and interaction

Behavior

• A button responds to touch with a ripple that confirms the input before the action runs.
• Five states are designed: enabled, hovered, focused, pressed, and disabled. Hovered and focused apply when a pointer or keyboard is connected.
• A disabled button stays visible and keeps its place in the layout, so nothing shifts when it becomes available again.

Positioning

• Keep the touch target at least 48×48dp, even when the button is visually smaller.
• Leave at least 8dp between a button and any other control that can be touched.

Writing guidelines

Button label text should be clear, descriptive, and use active verbs so people know what to expect when they interact with the button.

Casing: Write button text labels in sentence case. Capitalize the first word and lowercase the rest (unless the text contains a proper noun).

Width: Set a max width for the button, designing for at least 50%+ string growth compared to English. Buttons themselves should not have a hard-coded fixed width — width is determined by length of text labels.

Stacking: Allow buttons to grow as much as they need to within the max width. When you have two buttons and they don’t fit in the same line, then wrap the button component itself (not the button text). The secondary button will move to the second line. Both buttons will be the same width.

Related components

Changelog