Button Group

Basic Examples

Create a basic button group using the .btn-group class to wrap a series of buttons. Each button maintains its individual styling while appearing as part of a unified set. Add the role="group" attribute and an appropriate aria-label to enhance accessibility. Remixicon icons enhance visual appeal and improve button recognition.

Use the .active class to highlight the currently selected button, and enhance accessibility with aria-current="page". This visual feedback helps users understand their current context within the interface and indicates which option is currently selected or active.

Mixed Styles

In a button group, buttons can be styled with different contextual color classes to represent distinct actions or statuses. This approach helps users quickly identify the purpose and importance of each button based on color semantics. For example, red typically indicates destructive actions, yellow for caution, and green for confirmation.

Outlined Styles

Button groups with outlined buttons use the .btn-outline-* classes to create a more subtle appearance with transparent backgrounds and colored borders. Outlined button groups are ideal for secondary actions, less prominent toolbars, or interfaces where you want to reduce visual weight while maintaining functionality.

Checkbox and Radio Buttons

Transform checkboxes and radio inputs into toggle buttons within a button group to create intuitive selection interfaces. Use the .btn-check class to hide the default input appearance while maintaining functionality. Checkbox button groups allow multiple selections (like formatting options), while radio button groups enforce single selection (like alignment options).

Button Toolbar

Combine multiple button groups into a comprehensive toolbar using the .btn-toolbar class. Button toolbars organize related actions into logical groups, similar to application toolbars in desktop software. Add role="toolbar" and aria-label attributes to improve accessibility, and use margin utilities like .me-2 to create proper spacing between button groups.

Button toolbars can be enhanced with input groups to create complex control interfaces. Use .justify-content-between to create space between groups, or combine with other flex utilities to achieve custom layouts. These examples demonstrate browser-like navigation controls and media player interfaces.

Size Variations

Adjust button group sizes using the .btn-group-xl, .btn-group-lg, .btn-group-sm, and .btn-group-xs classes. Size variations help create visual hierarchy and adapt button groups to different interface contexts. Larger button groups work well for primary actions, while smaller sizes are suitable for compact toolbars or dense interfaces.

Nested Dropdowns

Create more complex button groups by nesting dropdown menus within them. This pattern is useful for interfaces with primary actions displayed as buttons and secondary actions hidden in a dropdown menu. The dropdown toggle button should be wrapped in its own .btn-group to maintain proper styling and behavior.

Vertical Variations

Create vertical button stacks using the .btn-group-vertical class instead of .btn-group. Vertical button groups are ideal for side navigation, action panels, or interfaces where vertical space is more available than horizontal space. They maintain all the functionality of standard button groups but with a vertical orientation.

Vertical button groups can also include dropdowns for more complex navigation structures. Note that for dropdowns at the bottom of a vertical group, use the .dropup class to ensure the menu opens in the correct direction.

Radio buttons can also be arranged vertically, creating intuitive option selectors for settings or preferences that are better displayed in a vertical layout.

Accessibility Considerations

Ensure button groups are accessible to all users by following these best practices:

• Use role="group" on button groups to indicate their relationship
• Add descriptive aria-label attributes to explain the button group's purpose
• Mark active states with aria-current="page" or aria-pressed="true"
• Ensure sufficient color contrast between button text and backgrounds
• Provide visible focus indicators for keyboard navigation
• Include descriptive text or aria-labels for icon-only buttons