Toolbar | Destyler

A container for grouping a set of controls, such as buttons, Toolbar groups or dropdown menus.

Features

Full keyboard navigation.

Install

Import

API

Root

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
dir	`Direction`	ltr
loop	`boolean`	false
orientation	`DataOrientation`	horizontal

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'

Button

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false
disabled	`boolean`	false

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'

Link

Props	Type	Default
as	`AsTag \| Component`	a
asChild	`boolean`	false

Separator

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'

ToggleGroup

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
defaultValue	`string \| string[]`	undefined
dir	`Direction`	ltr
disabled	`boolean`	false
loop	`boolean`	false
modelValue	`string \| string[]`	-
orientation	`DataOrientation`	vertical
rovingFocus	`boolean`	true
type	`TypeEnum`	single

Event	Type
update:modelValue	`[_value: string]`

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'

ToggleItem

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
defaultValue	`boolean`	undefined
disabled	`boolean`	false
pressed	`boolean`	undefined
value	`string`	on

Data attribute	Value
[data-orientation]	'vertical' \| 'horizontal'
[data-state]	'on' \| 'off'
[data-disabled]	Present when disabled