Button Group
The button group component can be used to group related buttons.
Last updated
Was this helpful?
The button group component can be used to group related buttons.
Last updated
Was this helpful?
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.
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.
Discernible text
Ensures buttons have discernible text
Tabindex
Ensures tabindex attribute values are not greater than 0
ID Attributes
Ensures every id attribute value is unique
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
Color Contrast
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds
default
Button group content
The Button Group component comprises items derived from Plus UI's Each item inherits the properties of the button component. For more details on the properties specific to button components, please refer to the . To customize the Button Group component, you can tailor the properties of its underlying button components.
