ButtonGroup

ButtonGroup is used to display a series of buttons with similar actions. Use ButtonGroup to ensure consistent spacing and wrapping behavior.

also known as Button Row, Action Bar

A set of two buttons side by side. The left button is secondary and the right button is primary.

Usage guidelines

When to use
  • Showing all the available options at one glance
  • Arranging a group of buttons in a horizontal or vertical stack due to limited space
When not to use
  • Switching between different views. Use Tabs instead

Mobile best practices

Keep primary actions (ex: submitting a form) on the right and secondary actions (ex: cancel) on the left. When used vertically, keep the primary action at the top.

For general Button best practices on color usage and states, refer to the Button documentation.

Accessibility

People use iOS's accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:

Accessible design on iOS


Accessible development on iOS
, Opens a new tab

Content

For writing best practices, refer to the Button documentation.

Design tokens

Use these tokens for applying size, weight and color styles to ButtonGroups.


Anatomy

See below how the ButtonGroup component is constructed.


Variants

Size

Mobile buttons are available in 2 sizes. The Button text always use $font-size-300 token (16sp).



  1. lg (60px)
    Large should be primarily used on Pinner, business and internal surfaces.
  2. sm (48px)
    Small should be used sparingly and only in places where the UI is very dense.

Orientation use cases

  1. Horizontal
    By default, a ButtonGroup is horizontal.
  2. Vertical
    Use vertical when horizontal space is limited by the Button’s content.

Dark mode

Styling

For information on color, icons, roles, and states, refer to the Button documentation.

Writing

Do
  • If your object is already described on the screen, Buttons only need a verb (Example: Save).
  • If your object isn’t described on the screen, Buttons need a verb + the object (Example: Create Pin).
  • Use fewer than 3 words.
  • Use sentence case.
Don't
  • Do not use punctuation.

For writing best practices, refer to the web Button documentation.

Localization

For RTL (right-to-left) languages, the layout of the button group is mirrored. the primary button will be on the left and top and the secondary button will be on the right and bottom.


Two sets of buttons, one vertically stacked and one horizontal. The button layout is localized for right-to-left languages.