Toolbar

A row of related actions that is a single tab stop: Tab enters it, the arrow keys move between its buttons, and Tab leaves it. Put ToolbarButtons and ToolbarGroups inside. Built on the bits-ui Toolbar.

Actions

A row of related actions that is a single tab stop. Tab enters it, the arrow keys move between the buttons, and Tab leaves. Icon-only buttons need an aria-label.

<Toolbar aria-label="Message actions">
	<ToolbarButton aria-label="Copy"><Copy class="size-4" /></ToolbarButton>
	<ToolbarButton aria-label="Edit"><Pencil class="size-4" /></ToolbarButton>
	<ToolbarButton aria-label="Regenerate"><RefreshCw class="size-4" /></ToolbarButton>
</Toolbar>

Toggle group

A ToolbarGroup holds toggle buttons that keep the arrow-key navigation of the toolbar. type="multiple" lets several be pressed and binds value to an array.

Pressed: bold

<div class="space-y-2">
	<Toolbar aria-label="Text formatting">
		<ToolbarGroup type="multiple" bind:value={formats} aria-label="Formats">
			<ToolbarGroupItem value="bold" aria-label="Bold"
				><Bold class="size-4" /></ToolbarGroupItem
			>
			<ToolbarGroupItem value="italic" aria-label="Italic"
				><Italic class="size-4" /></ToolbarGroupItem
			>
			<ToolbarGroupItem value="underline" aria-label="Underline">
				<Underline class="size-4" />
			</ToolbarGroupItem>
		</ToolbarGroup>
	</Toolbar>
	<p class="text-muted text-xs">
		Pressed: {formats.length ? formats.join(', ') : 'none'}
	</p>
</div>

Vertical

orientation="vertical" stacks the buttons and moves between them with the up and down arrows.

<Toolbar orientation="vertical" aria-label="Actions" class="w-fit flex-col">
	<ToolbarButton aria-label="Copy"><Copy class="size-4" /></ToolbarButton>
	<ToolbarButton aria-label="Edit"><Pencil class="size-4" /></ToolbarButton>
</Toolbar>

API

`Toolbar`

Prop	Type	Description
`children` required	`import('svelte').Snippet`	`ToolbarButton`s and `ToolbarGroup`s.
`orientation`	`'horizontal'\|'vertical'`	Direction of the row; decides which arrow keys move focus (forwarded via `...rest`).
`loop`	`boolean`	Whether focus wraps from the last button to the first (forwarded via `...rest`).
`class`	`string`	Additional Tailwind classes merged onto the toolbar.

`ToolbarButton`

A button inside a Toolbar. It is the design-system Button wearing the toolbar's keyboard navigation, so it takes the same variant, size and status. Icon-only buttons need an aria-label.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Button content.
`variant`	`'default'\|'destructive'\|'secondary'\|'ghost'\|'link'`	`'ghost'`	Visual emphasis of the button.
`size`	`'default'\|'lg'\|'icon'`	`'icon'`	Size of the button.
`status`	`'idle'\|'pending'\|'success'`		Progress of the action this button started (forwarded via `...rest`).
`onclick`	`(event: MouseEvent) => void`		Click event handler (forwarded via `...rest`).
`disabled`	`boolean`		Disables the button (forwarded via `...rest`).
`class`	`string`		Additional Tailwind classes merged onto the button.

`ToolbarGroup`

A set of toggle buttons inside a Toolbar, such as thumbs up and thumbs down. With type="single" at most one is pressed, and value holds which.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		`ToolbarGroupItem`s.
`value` bindable	`string\|string[]`		The pressed item's value, or the pressed values with `type="multiple"`. Two-way bindable via `bind:value`.
`type`	`'single'\|'multiple'`	`'single'`	Whether one item or several can be pressed.
`class`	`string`		Additional Tailwind classes merged onto the group.

`ToolbarGroupItem`

A toggle button inside a ToolbarGroup. It shows as pressed while its value is the group's. Icon-only items need an aria-label.

Prop	Type	Description
`children` required	`import('svelte').Snippet`	Item content.
`value` required	`string`	What the group's `value` becomes while this item is pressed.
`disabled`	`boolean`	Disables the item (forwarded via `...rest`).
`class`	`string`	Additional Tailwind classes merged onto the item.