> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# ButtonIconGroup
> A pre-composed cluster of `IconButton`s for toolbars and action rows (media controls, editing tools, content action bars).
```tsx theme={null}
import { ButtonIconGroup } from "@fanvue/ui";
import type { ButtonIconGroupOrientation, ButtonIconGroupProps } from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import { ButtonIconGroup, HeartIcon, IconButton, ReplyIcon, ShareIcon } from "@fanvue/ui";
} aria-label="Like" />
}
aria-label="Reply"
/>
}
aria-label="Share"
/>
```
## Secondary Variant
```tsx theme={null}
import { ButtonIconGroup, HeartIcon, IconButton, ReplyIcon, ShareIcon } from "@fanvue/ui";
}
aria-label="Like"
/>
}
aria-label="Reply"
/>
}
aria-label="Share"
/>
```
## Disabled
```tsx theme={null}
import { ButtonIconGroup, CopyIcon, EditIcon, IconButton, TrashBinIcon } from "@fanvue/ui";
}
aria-label="Edit"
disabled
/>
}
aria-label="Copy"
disabled
/>
}
aria-label="Delete"
disabled
/>
```
## Media Controls
```tsx theme={null}
import {
ButtonIconGroup,
ForwardIcon,
IconButton,
PauseIcon,
PlayIcon,
RepeatIcon,
} from "@fanvue/ui";
} aria-label="Play" />
}
aria-label="Pause"
/>
}
aria-label="Skip forward"
/>
}
aria-label="Repeat"
/>
```
## Editing Tools
```tsx theme={null}
import { ButtonIconGroup, CopyIcon, EditIcon, IconButton, TrashBinIcon } from "@fanvue/ui";
} aria-label="Edit" />
} aria-label="Copy" />
}
aria-label="Delete"
/>
```
## Props
## ButtonIconGroup
A pre-composed cluster of `IconButton`s for toolbars and action rows (media controls, editing tools, content action bars). Items are spaced with a fixed 4px gap and stay individually rounded — this is a spaced group, not a segmented/joined control.
Exposes `role="group"` by default; pass an `aria-label` or `aria-labelledby` to describe the cluster for assistive technology.
This is a presentational layout primitive: it does not implement roving-tabindex / arrow-key focus management. `role` is overridable, but if you set an interactive-widget role such as `role="toolbar"` you own the keyboard behaviour that role implies. For orientation-aware roles the `aria-orientation` is synced to `orientation` automatically.
The icon buttons to cluster together. Compose `IconButton` elements here; the group only handles layout and spacing.
Direction the icon buttons flow in. Use `vertical` for side rails and stacked media controls.
## Exported types
Also exported from `@fanvue/ui`: `ButtonIconGroupOrientation`, `ButtonIconGroupProps`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)