Button Group
The button group component can be used to group related buttons.
Last updated
The button group component can be used to group related buttons.
Last updated
A button group component is a user interface element that allows the grouping of multiple buttons or related actions in a cohesive and visually organized manner. It serves to enhance user interaction and streamline the accessibility and use of various functions within an application by presenting them as a unified set. Button groups are a versatile tool for creating clear and efficient navigation, selection, or action-taking options, improving the overall user experience.
The button group's anatomy consists of essential elements: a "label" for identification, a "container" for defining boundaries, and optional "suffix" and "prefix icons" for added context. This organized layout streamlines user interaction and enhances the group's usability in your application.
Button group component properties enable customization of appearance and behavior. They include options for layout, styling, spacing, button variants, and selection behavior. These properties allow tailored design and interaction, ensuring a user-friendly experience in your application.
The Button Group component comprises items derived from Plus UI's button component. Each item inherits the properties of the button component. For more details on the properties specific to button components, please refer to the button documentation. To customize the Button Group component, you can tailor the properties of its underlying button components.
Achieve precision in design with our Button Group Component's flexible layout and spacing options. Define the arrangement and spacing between buttons to create a visually balanced and cohesive presentation. Whether integrated into navigation bars or content sections, the layout adapts seamlessly to diverse design structures.
Effortlessly adapt to user preferences with our Button Group Component's built-in support for both light and dark modes. Enhance visibility and aesthetics by seamlessly transitioning between these modes, ensuring a consistent and visually pleasing experience across different environmental settings.
Engineered with industry-leading standards, it ensures a user-friendly experience for all individuals, including those with disabilities. Screen reader compatibility, keyboard navigation, and high contrast options make our Button Group Component accessible and intuitive for a diverse user base.
| Criteria | Description | Status |
|---|---|---|
Discernible text | Ensures buttons have discernible text | ✔️ Passed |
Tabindex | Ensures tabindex attribute values are not greater than 0 | ✔️ Passed |
ID Attributes | Ensures every id attribute value is unique | ✔️ Passed |
Nested Interactive Controls | Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies | ✔️ Passed |
Color Contrast | Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds | ✔️ AA ~ AAA |
| Name | Description |
|---|---|
default | Button group content |
