Skip to content
Telescope

Button

A clickable element which communicates that users can trigger an action.

Features

  • Comes in multiple variants to match the context of the action.
  • Supports loading and disabled states.
  • Can display an icon next to the text of the button.

When to use

Use buttons when users need to trigger actions or events such as submitting a form, opening a modal, cancelling an action, performing a delete operation, or similar.

Examples

Primary

Use primary buttons to highlight the most important actions on a page. They should be reserved for key actions, ideally only one per page to maintain clear hierarchy.

Information:

Never put more than one primary button in a group of buttons

Secondary

Use secondary buttons for actions of lower importance. They are commonly used alongside a primary button to highlight actions that are less critical in an experience.

Tertiary

Use tertiary buttons for actions of minor importance, suitable when space is limited or for supplementary actions such as "Learn more" or "View details."

Destructive

Use destructive buttons to warn of actions that are irreversible or have negative consequences if taken without care such as deleting an item, cancelling a subscription, or similar.

Information:

Destructive buttons should be used sparingly

Loading

When an action is triggered, the button should be in a loading state. This is to prevent the user from triggering the action again and to show the status of the action. The loading state hides the content but keeps the buttons original width.

For long lived processes, you can also provide "loading text" to show a message to the user. Don't use loading text for processes that are expected to be quick, as this may result in flickering and a less than ideal user experience.

Disabled

Use a disabled button to show that an action exists, but is not available under the current circumstance. A disabled button can be used to maintain layout continuity and to communicate that an action may become available later.

Information:

Avoid disabled buttons whenever possible as there are many usability pitfalls to using them. If you really need a disabled button, add a tooltip to explain why it's disabled. Also, users should always be able to press the submit button in forms.

With icon

Show an icon next to the button label when additional clarity is required or the icon is highly relevant to the action. Icons should not be used for decoration.

Position the icon to the left of the button label to emphasize the nature of an action:

Position the icon to the right of the button label to suggest navigation or progression:

Information:

Use an Icon button for actions that affect the visibility of other UI elements.

Full width

Use full-width buttons to maximize visibility and encourage interaction for specific actions. Use them sparingly, primarily for two scenarios: primary actions on small-screen devices and key moments within focused user experiences (such as a login screen).

Best practices

Do
Use a primary button in combination with a secondary or tertiary button.
Don't
Place multiple primary buttons next to each other in a group of buttons.
No example
Do
Use disabled buttons for actions that are temporarily unavailable.
Don't
Show disabled buttons for actions that are never possible within an experience.
Do
Use icons when additional clarity is required or the icon is highly relevant to the action.
Don't
Use icons purely for decoration. It can be distracting and confusing.

Related components

  • Button group: A layout component used to group multiple related actions a user can take.
  • Icon button: Enables users to control the visibility of other UI elements.
  • Link: Text that navigates the user from one page to another.