Buttons and links

Buttons communicate and trigger actions a user can take in an application or website. Links are used to take users somewhere, like another page inside of a web application, or an external site such as help or documentation.

Technically, a button represents a box area that can be clicked or tapped, while a link represents text that can be clicked or tapped.

Usage

Button usage

Link usage

Button usage

A button should represent an action a user can take, like submitting a form, cancelling a process, or creating a new object. When the user clicks a button, the associated action should be triggered or performed immediately.

Button types

Use different button types to build hierarchy in an application layout.

Button types

Primary button

Use primary buttons for the main action you want a user to take on a page. Try to limit primary buttons to one per page.

Secondary button

Use secondary buttons for secondary actions a user can take. For example, a cancel button would be secondary to a submit button on a form or modal.

Danger button

Use danger buttons for actions a user can take that are potentially destructive or difficult/impossible to undo, like deleting or removing user data.

Text button

Use a text button for secondary or tertiary actions on a page or modal. For example, you might use text buttons to indicate actions a user might take on items in a data list or table to reduce visual clutter and save space.

Icon button

Use icon buttons for actions that are commonly associated with icons. For example, you could use the close icon to exit a modal or window, or use the hamburger icon to toggle a menu.

Links are used to take users somewhere, like another page inside of a web application, or an external site like help or documentation.

For links that navigate users to any location external to the current website or application, link text must be followed by the external link icon.

External link icon

When not to use

Don't use link text to represent actions.

Content

Writing button labels

  • Button labels should be specific and clearly communicate their associated action.
  • Always use verbs or verb phrases.
  • Aim for short (1-3 words) labels wherever possible.
  • Avoid long button labels that might risk wrapping.

Writing link labels

Use specific, action-focused labels that match what the user will see when they arrive at their location. For example, if you are sending a user to a dashboard, your link label might read View dashboard. For a link directing a user to a support forum, you might say Get help in the support forum.

See our content guidelines for additional guidance.

HTML/CSS

React