Orientation
A button group can be either horizontal or vertical in its orientation. By default, a button group is horizontal. Use vertical option when horizontal space is limited.
Actions
Button Group
A button group is a grouping of buttons whose actions are related to each other.
Examples
Options
Size
Button groups come in four different sizes: small, medium, and large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
Disabled
A button group in a disabled state shows that the buttons within the group exist, but are not available in that circumstance. This state can be used to maintain layout continuity and to communicate that a button group may become available later.
Behaviors
Overflow
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.
Implementation
Example Name
Description and implementation notes
<p> code example </p>Information
Checklist
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).
All Color Schemes
Works properly across all color schemes (light, dark).
Accessible Contrast for Text
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible Contrast for UI Components
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Defined Options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).
Defined Behaviors
Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing Guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Internationalization Guidelines
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Keyboard Interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Design Tokens
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
UI Kit
Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.