CSS-Only

Button Group

Group related buttons together horizontally or vertically with connected borders and shared focus states. Perfect for segmented controls, toolbars, and action groups.

Example

<div class="omni-button-group">
  <button class="omni-button" data-variant="secondary" data-variant-style="outline">Left</button>
  <button class="omni-button" data-variant="secondary" data-variant-style="outline">Center</button>
  <button class="omni-button" data-variant="secondary" data-variant-style="outline">Right</button>
</div>

Orientation

Horizontal (default)

Buttons are arranged side-by-side with connected borders:

<div class="omni-button-group">
  <button class="omni-button" data-variant="primary">First</button>
  <button class="omni-button" data-variant="primary">Second</button>
  <button class="omni-button" data-variant="primary">Third</button>
</div>

Vertical

Use data-orientation="vertical" to stack buttons:

<div class="omni-button-group" data-orientation="vertical">
  <button class="omni-button" data-variant="secondary" data-variant-style="outline">First</button>
  <button class="omni-button" data-variant="secondary" data-variant-style="outline">Second</button>
  <button class="omni-button" data-variant="secondary" data-variant-style="outline">Third</button>
</div>

Variants

Solid Style

Outline Style

Ghost Style

With Icons

Icon-Only Buttons

Sizes

All buttons in a group should use the same size:

Use Cases

Toolbar Actions

View Switcher

Segmented Control

Action Menu (Vertical)

API Reference

Attribute Values Default Description
data-orientation horizontal, vertical horizontal Layout direction of the button group

Child Button Attributes

All standard button attributes work within button groups. See the Button component for full details.

Attribute Values Description
data-variant primary, secondary, success, warning, danger, info Semantic color variant
data-variant-style solid, outline, ghost, soft Visual style treatment
data-size sm, md, lg Button dimensions (keep consistent)
data-type icon Square button for icon-only

Best Practices

  • Keep sizes consistent: All buttons in a group should use the same data-size value
  • Match styles: Generally use the same data-variant-style for all buttons in a group
  • Use semantic variants: You can mix data-variant values to indicate different actions (e.g., primary action vs. danger action)
  • Label icon-only buttons: Always include aria-label on icon-only buttons for accessibility
  • Limit group size: Keep button groups to 2-5 buttons for usability
  • Consider vertical on mobile: For responsive layouts, vertical orientation may work better on narrow screens
  • Indicate selected state: For segmented controls, use a different data-variant-style to show the active option

Accessibility

  • All keyboard navigation and focus management inherits from the Button component
  • Focus indicators work correctly with z-index stacking on hover/focus
  • For segmented controls, consider using role="group" and aria-label on the button group
  • For radio-like behavior, consider role="radiogroup" with aria-checked on buttons
  • Icon-only buttons must have aria-label for screen reader users
  • Tab order flows naturally left-to-right (horizontal) or top-to-bottom (vertical)
  • Disabled buttons are properly removed from tab order and indicated visually

ARIA Example for Segmented Control

<div class="omni-button-group" role="group" aria-label="View selection">
  <button class="omni-button" data-variant="primary" aria-pressed="true">Day</button>
  <button class="omni-button" data-variant="secondary" data-variant-style="outline" aria-pressed="false">Week</button>
  <button class="omni-button" data-variant="secondary" data-variant-style="outline" aria-pressed="false">Month</button>
</div>

Components Used

Other OmniUI components demonstrated on this page:

Button