Usage guidelines
- Showing all the available options at one glance
- Arranging a group of buttons in a horizontal or vertical stack due to limited space
- Switching between different views. Use Tabs instead
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, refer to the Button documentation.
Accessibility
People use Android'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 Android
Accessible development on Android
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).
- lg (60dp)
Large should be primarily used on Pinner, business and internal surfaces. - sm (48dp)
Small should be used sparingly and only in places where the UI is very dense.
Orientation use cases
- Horizontal
By default, a ButtonGroup is horizontal. - Vertical
Use vertical when horizontal space is limited by the Button’s content.
Styling
For information on color, icons, roles, and states, refer to the Button documentation.
Writing
For writing best practices, refer to the content standards 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.
