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

Button 1
Button 2 with a long title that wraps to the next line
Button 3

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

Display per row: 2
Display per row: 2
Display per row: 3 (default)
Display per row: 3 (default)
Display per row: 3 (default)
Display per row: 4
Display per row: 4
Display per row: 4
Display per row: 4

Gutter Width

Gutter width: Small (default)
Gutter width: Small (default)
Gutter width: Small (default)
Gutter width: Medium
Gutter width: Medium
Gutter width: Medium
Gutter width: Large
Gutter width: Large
Gutter width: Large
Gutter width: None
Gutter width: None
Gutter width: None

Bottom Margin

Bottom Margin: None
Bottom Margin: X-Small
Bottom Margin: Small
Bottom Margin: Medium
Bottom Margin: Large
Bottom Margin: X-Large

the end

Top Margin

Top Margin: None
Top Margin: X-Small
Top Margin: Small
Top Margin: Medium
Top Margin: Large
Top Margin: X-Large

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.