Button Group

Groups related buttons into a single container to present them as a unified set of actions. This helps establish visual relationships and improves clarity when multiple actions are closely related.

Usage

Use button groups to organize actions that share a common context or hierarchy. Choose a horizontal or vertical layout based on available space and the flow of the interface. Avoid grouping unrelated or loosely related actions.

API Reference

Component attubute(s)

x-h-button-group
x-h-button-group-separator

Attributes

Attribute	Type	Required	Description
data-orientation	horizontal vertical	false	Changes the orientation of the button group.

Horizontal

<div x-h-button-group>
  <button x-h-button data-variant="outline">Action</button>
  <button x-h-button data-size="icon" data-variant="outline" aria-label="Add button">
    <i role="img" data-lucide="plus"></i>
  </button>
</div>
<div x-h-button-group>
  <button x-h-button>Left</button>
  <div x-h-button-group-separator></div>
  <button x-h-button>Right</button>
</div>

Vertical

<div x-h-button-group data-orientation="vertical">
  <button x-h-button data-variant="outline">Top</button>
  <button x-h-button data-variant="outline">Center</button>
  <button x-h-button data-variant="outline">Bottom</button>
</div>
<div x-h-button-group data-orientation="vertical">
  <button x-h-button data-size="icon" data-variant="outline" aria-label="Zoom in">
    <i role="img" data-lucide="zoom-in"></i>
  </button>
  <button x-h-button data-size="icon" data-variant="outline" aria-label="Fit to screen">
    <i role="img" data-lucide="fullscreen"></i>
  </button>
  <button x-h-button data-size="icon" data-variant="outline" aria-label="Zoom out">
    <i role="img" data-lucide="zoom-out"></i>
  </button>
</div>