Component

ButtonGroup

A compact toggle of icon options — one active at a time. Compose with ButtonGroup.Button.

jsx

import { List, Grid } from 'lucide-react';

const [view, setView] = useState('list');

<ButtonGroup value={view} onChange={setView}>
  <ButtonGroup.Button value="list" aria-label="List">
    <List size={16} />
  </ButtonGroup.Button>
  <ButtonGroup.Button value="grid" aria-label="Grid">
    <Grid size={16} />
  </ButtonGroup.Button>
</ButtonGroup>

ButtonGroup props

Prop	Type	Default	Description
`value`	string	—	Value of the currently active button.
`onChange`	(value) => void	—	Called with the selected value on tap.
`children`	ReactNode	—	ButtonGroup.Button items.
`className`	string	''	Extra classes.