Skip to content
Telescope

Button group

A layout component used to group multiple related actions a user can take.

Features

  • Applies recommended spacing between buttons.
  • Aligns buttons to the group's vertical center.

When to use

Use button groups when you have multiple related actions that a user can take. These are particularly useful for actions that are closely related in functionality, such as "Save" and "Cancel" or "Edit" and "Delete". For general button guidelines, see the Button component.

Examples

Vertical layout

For the responsive design or cases where horizontal space is limited, the group's orientation can be changed to stack buttons vertically.

Information:

The button should be ordered from least to most important based on the reading order.

Best practices

Place primary actions (e.g. "Save") on the right and secondary actions (e.g. "Cancel") on the left. This order improves the user flow by making it "end" with the conclusion. Also, users are accustomed to having actions that move them forward in a flow on the right (e.g. “Next”), while actions that move them backwards are typically placed to the left (e.g. “Previous”).

Do
Order buttons from least to most important based on the reading order.
Don't
Order buttons from most to least important based on the reading order.

Related components

  • Button: A clickable element which communicates that users can trigger an action.
  • Icon button: Enables users to control the visibility of other UI elements.