Button Group
Button groups allow you to group multiple related buttons together into a single cohesive unit.
Features
- Grouped layout
- Automatic position tracking
- Controlled or uncontrolled
- Headless styling
Installation
npm install @ariaui/button
Examples
Each playground is a real layout: standard toolbars, a split button with DropdownMenu, an input companion, pagination-style rows, and vertical icon stacks. Style joined edges with Tailwind; items receive data-position from Button.Group.
Snippets list the matching @heroicons/react/24/outline imports per variant.
Standard
Basic horizontal groups with shared borders, plus a standalone icon control.
No preview output yet.
Split button
Primary action with a dropdown for secondary actions.
No preview output yet.
With input
Circular control beside a pill input — common chat composer layout.
No preview output yet.
Pagination style
Dense grouped controls for page numbers and prev/next.
No preview output yet.
Vertical
Stacked icon groups and a standalone control.
No preview output yet.
Anatomy
import * as Button from "@ariaui/button";
export default function Example() {
return (
<Button.Group>
<Button.Item />
</Button.Group>
);
}
API Reference
API Reference
Accessibility
Button groups combine multiple Button.Item elements within a Button.Group. The Group itself provides context for position tracking; individual items maintain their own keyboard and interaction semantics.
Each item in a button group can be disabled independently. Use the default native button for actions, or pass asChild with a real anchor/router link for navigation so ARIA and keyboard behavior follow the underlying element — refer to the Button accessibility guide for details.