Button

Buttons help direct and capture user action and intent.

Types

CTA Button
Icon button
Link button

Choosing a button

Each button type serves a specific purpose. Choose a button type according to the screen’s context to maintain a clear and effective experience.

CTA

A button that triggers the primary action in a flow. Use when there is one clear, high-priority action to complete. Learn more about using CTA buttons.

Icon

A button that triggers an action using only an icon. Best for familiar, universal actions where the meaning is clear without a label. Learn more about using Icon buttons.

Link

A button that triggers actions that keep users on the current page, like expanding content or clearing a form. Learn more about using Link buttons.  Don’t confuse link buttons for standard text links. Buttons take action, links navigate. Learn more about Text links.

Hierarchy

Use button hierarchy to communicate the relative importance of actions. Limit each page to one primary action to maintain clarity and focus.

Placement

Where you place buttons affects how easily users find and complete actions. Consider available space, the number of buttons, and the surrounding content.

Single primary

Use a single primary button for the most important action on the page.

Vertical stack

Use a vertical button stack when the space is narrow and the buttons have titles.

Overflow

An overflow icon button can be placed inline next to a CTA button when there are two or more related, but low-priority actions.

Horizontal stack

Use a horizontal stack when there is enough room. This is common in dialogs and cards. The highest emphasis button is aligned to the trailing edge of the container in a horizontal stack.