The “Layout Component - Button Group” allows you to organize multiple buttons into a structured grid format. You can customize the component by specifying the number of buttons per row and adjusting the spacing between them. This component is designed to house Standard Button components.
Example
Content Options
As a layout component, the "Layout Component - Button Group" has no content options, but the buttons placed inside can have their content and styles changed individually.
Learn more about the Standard Button Component.
Layout and Styling Options
Displayer per row
Gutter Width
Bottom Margin
the end
Top Margin
the end
Usage
Do
- Keep button labels short and descriptive to ensure clarity and readability.
- Choose an appropriate number of buttons per row to avoid overcrowding and maintain visual clarity.
- Ensure that each button has a distinct and recognizable action to avoid confusion.
- Use the button group to present a set of similar actions or options rather than mixing unrelated actions.
- Utilize button grouping to reduce the visual clutter of too many individual buttons scattered across the page.
Don't
- Avoid using too many buttons in a single group, as this can overwhelm users.
- Refrain from placing buttons too close together; ensure there’s adequate spacing to prevent accidental clicks.
- Avoid using inconsistent button sizes, as this can disrupt the layout and visual hierarchy.
- Refrain from using the button group to display unrelated or conflicting actions.
- Don’t add buttons with identical labels but different functions, as this can confuse users.
Accessibility
- Make sure there is sufficient contrast between the button text and background to support accessibility.