ButtonGroup

Visually joins a row of <Button>s into a segmented group.

role="group" + an accessible label are the caller's to provide via ...rest.

Actions

<script lang="ts">
	import { ButtonGroup } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
class	string	—	Merged with the component's own classes, last — so yours win.
children required	Snippet	—	The content.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<ButtonGroup aria-label="Text formatting">
	<Button variant="outline" size="icon" aria-label="Bold"><Bold /></Button>
	<Button variant="outline" size="icon" aria-label="Italic"><Italic /></Button>
	<Button variant="outline" size="icon" aria-label="Underline"><Underline /></Button>
</ButtonGroup>

Actions · Button · CopyButton · Toggle · Menu · ContextMenu

---

← All components · Getting started · Theming · source