The component renders as a <div> wrapper element, used for grouping related actions. The component accepts custom classes and spacing modifiers:

<div class="bc-button-group bc-button-group--spacious">
  <button class="bc-btn">Button 1</button>
  <button class="bc-btn">Button 2</button>
</div>

HTML Markup:

• <div>: Wraps the buttons or elements being grouped.
• bc-button-group--compact or bc-button-group--spacious: Applies the appropriate spacing between elements.

The button group component is intended to streamline and organize related actions, offering options to modify layout spacing.

Stylistic variants:

• compact: Reduces the spacing between grouped buttons, ideal for dense UI areas.
• spacious: Increases the space between buttons for a more relaxed layout.

The Button Group component is designed to visually group a set of related actions together to improve readability and comprehension for all users.

The Button Group component was created to meet the need for a consistent way to group buttons or similar elements in the UI, with adjustable spacing. Grouping buttons allows for better organization and helps users quickly identify related actions. The spacing options (compact and spacious) allow for flexibility in design and layout while maintaining a uniform structure.

This component aligns with common UI patterns and offers a balance of flexibility and usability, with user research supporting the importance of grouped actions in web applications.

• Logical grouping: Organize buttons based on related actions. For example, a “Submit” button could be grouped with a “Cancel” button to give users a clear decision.
• Visual hierarchy: The primary action should stand out as the most important button. Use visual cues like color and size to guide users toward the main action.
• Consistency: Avoid mixing different button styles within a group. Select a single button variation (primary, secondary, etc.) to keep the UI clean and consistent.
• Best practices:: Avoid excessive use of compact spacing in crowded interfaces as it may impact usability and readability.

• Buttons
• Forms
• Modals