Button Group
The button group component organizes two or more buttons to group related options. When a button is selected, it visually highlights the selection. It's useful for multi-select interfaces or as filters, offering alternatives to checkboxes or combobox.
API Reference
Examples
Vertical
Usage
General Guidelines
Do's
- Utilize to gather buttons or combobox with similar functions or purposes.
- Employ the suitable role attribute on the button group for enhanced semantic meaning.
- Single selection allows only one option to be chosen at a time.
- Multiple options can be simultaneously chosen. Toggling an option switches between selected and unselected states.
- The maximum number of buttons shown in a group should be restricted to four or fewer.
Don'ts
- Avoid utilizing button groups for individual settings.
- Avoid splitting button groups into two rows.
- Avoid using icons that do not convey the action of the button.
- Avoid incorporating components beyond buttons, combobox, and, in specific cases, visually hidden components into the button group.
- Ensure that an appropriate label is included when the added role attribute necessitates it.
- Avoid utilizing the button group for constructing grid-based layouts.
Writing Guidelines
When to use
- Organize related options, such as different actions or filters.
- Enable users to select multiple options simultaneously with clear visual indication.
- Enhance the user experience in forms, particularly when selecting several options.
- Serve as filters for refining displayed data, offering users a convenient way to toggle between views.
- Used for navigating between related sections or pages, providing clear pathways for users.
When not to use
- When the buttons don't represent related options or actions.
- If the buttons need to be arranged in a grid layout.
- When the functionality requires components other than buttons and combobox.
- If there is a need for individual labels for each button that cannot be accommodated within the button group.
Use Case
General Use Cases
Button group are useful for presenting users with a set of mutually exclusive options, where only one choice can be selected at a time. Example of this is an filter menu with only few choices like "All", "Active", and "Completed".
Digital Health Use Cases
For Digital Health Applications button group can be used for tracking symptoms and mood of user. for example button group could represent different pain levels, sleep quality options (good, fair, poor), or mood states (happy, sad, anxious). Users can quickly tap a button to log their daily experiences.
Accessibility Guidelines
- Add
aria-labelto the button element. Use this to provide an accessible name for buttons that don't have visible text, and to distinguish between multiple buttons with identical visible text. The text will also be added to the title attribute of the button. - Use
aria-describedbyattribute to identifies the element (or elements) that describes the element on which the attribute is set. correctly, define an ID for the element you want to use as label and set the property to that ID. - Use
aria-disabledto indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. - Add
aria-pressedattribute to indicates the current "pressed" state of a toggle button. - Use
aria-controlsto property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.