A button group is a grouping of buttons whose actions are related to each other.
A button group can be either horizontal or vertical in its orientation. By default, a button group is horizontal. The vertical option should be reserved for when horizontal space is limited.
A button group in a disabled state shows all the buttons contained in the group as unable to be interacted with.
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.
horizontal / vertical
yes / no
When horizontal space is limited, button groups stack vertically. Buttons are stacked by the importance of the action, with the most critical or primary action at the bottom.
The top-level action within a button group should be a call to action, primary, or negative button. The other buttons should always be secondary buttons of the same style (standard or quiet). Don’t combine more than 2 button styles in a button group.
Button groups are aligned contextually. In general, button groups are left-aligned to follow content such as a block of text. They are center-aligned in the context of an empty state. And, they should be right-aligned inside container components such as dialogs, popovers, or cards.
The order of button priority should match the alignment of surrounding text. When text is left-aligned, buttons should be arranged so that the leftmost button is the most critical. When text is right- or center- aligned, the most critical action should be the furthest right.
Not all buttons in a group require an icon, but buttons with icons should always be of a higher priority than ones without icons. If the top-level action in a group doesn’t have an icon, don’t use icons in the remaining lower-level actions.
For RTL (right-to-left) languages, the layout of the button group is mirrored.
|Tab||Moves focus to the next button in the group.|
|Jan 30, 2020||5.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.