# Button group

Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.

- ID: `button-group`
- Import: `animui/button-group`
- Category: Actions
- Runtime exports: `ButtonGroup`, `default`
- Declaration: `types/free/components/button-group.d.ts`
- Type provenance: emitted-original-typescript
- Related: button, split-button, segmented-control, floating-button-group, expanding-button-group

```tsx
import { ButtonGroup } from 'animui/button-group';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info button-group` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
export { ButtonGroup, default } from '../registry/components/button-group/button-group.js';
export type { ButtonGroupItem, ButtonGroupMenu, ButtonGroupMenuItem, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupSize, ButtonGroupVariant } from '../registry/components/button-group/button-group.js';
```