Developer mode
Opens components on the React tab by default.
Your bookmarks

ButtonGroup

Groups multiple related actions a user can take.

When you have several actions that have a similar purpose, it can help to group them together for clear organization.

If the actions are important, fill the group with buttons. If they’re less important, consider button links. Keep the number of grouped buttons low so as not to overwhelm users.

Component status

Figma
n/a
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released
Related actions: all actions within the group are visually connected; buttons: includes more important actions; ButtonLinks: includes less important actions.

Guidelines               

Use only for closely related actions 

Button groups remove many visual clues that there are multiple actions, such as spacing and border radiuses on buttons. This makes them great at presenting a united visual.

It also makes it more difficult for users to distinguish that there are multiple actions. So only use them for actions that clearly relate to one another.

Follow guidelines for children

Make sure to follow the guidelines for whatever components you’re using within the group.

Related components

Button and ButtonLink

Button groups present multiple actions as one. For individual actions, use buttons for more important actions and button links for less important ones. See our interactive guide on choosing the right component for your actions.