Studio
2

Toolbar

Installation

pnpm dlx @mielui/svelte add toolbar

Usage

Toolbars are flat by default. Set variant="depth" on Toolbar.Root to opt into raised keys and recessed selections. Button, Link, and Item inherit the variant. Depth follows the theme's shadow, edge-highlight, and reduced-motion settings. Both examples include zoom controls with number shuffle for the changing percentage. Tooltips use the input surface colors.

Import the component subpath as a namespace. Root owns one roving keyboard collection: compose Button, Link, Separator, and Group containing Item. Give Root an aria-label or aria-labelledby. Set orientation to vertical for vertical arrow navigation, and loop to false to stop at the ends. Disabled items are skipped. Each interactive part forwards native attributes and bind:element.

Group is a selectable group: use type="single" with a string value, or type="multiple" with a string array. Both support bind:value, onValueChange, and disabled. Item requires a value and renders a pressed button. Plain visual grouping can use a div without introducing another keyboard collection. Separator automatically runs perpendicular to the toolbar.

Omit a group, reorder Link before Button, or restyle any part with class. Use the toolbar's Item for selections instead of nesting an independent ToggleGroup keyboard collection. The existing callable Toolbar export and composer navigation remain available for existing integrations; new compositions use Toolbar.Root from the component subpath.

Depth variant

Multiple selections

Selection and commands

Use Item inside a single or multiple Group for persistent choices. Use Toolbar.Button for a one-time action such as Clear. Label the toolbar and each icon-only control; the examples display the selected tool or apply formatting to a sample sentence.

API reference

Toolbar.Root

Prop Type Default
children Snippet<[]> | undefined —
id string | undefined —
style string | StyleProperties | null | undefined —
loop boolean | undefined

Whether or not to loop through the toolbar items when navigating with the keyboard.

 —
orientation Orientation | undefined

The orientation of the toolbar. This determines how keyboard navigation will work within the toolbar.

 'horizontal'
variant "default" | "depth" | undefined 'default'
element Bindable HTMLDivElement | null | undefined null

Toolbar.Button

Prop Type Default
children Snippet<[]> | undefined —
id string | undefined —
style string | StyleProperties | null | undefined —
disabled boolean | null | undefined

Whether the button is disabled or not.

 —
element Bindable HTMLButtonElement | null | undefined null

Toolbar.Group

Prop Type Default
children Snippet<[]> | undefined —
id string | undefined —
style string | StyleProperties | null | undefined —
disabled boolean | undefined

Whether the toggle group is disabled or not.

 —
type Required "single" | "multiple" —
value Bindable string | undefined | string[] | undefined —
onValueChange ((value: string) => void) | undefined | ((value: string[]) => void) | undefined —
element Bindable HTMLDivElement | null | undefined null

Toolbar.Item

Prop Type Default
children Snippet<[ToggleGroupItemSnippetProps]> | undefined —
id string | undefined —
style string | StyleProperties | null | undefined —
disabled boolean | null | undefined

Whether the toggle item is disabled or not.

 —
value Required string

The value of the toggle item.

 —
element Bindable HTMLButtonElement | null | undefined null

Toolbar.Link

Prop Type Default
children Snippet<[]> | undefined —
id string | undefined —
style string | StyleProperties | null | undefined —
element Bindable HTMLAnchorElement | null | undefined null

Toolbar.Separator

Prop Type Default
id string | undefined —
style string | StyleProperties | null | undefined —
orientation Orientation | undefined

The orientation of the separator.

 —
decorative boolean | undefined

Whether the separator is decorative and should be hidden from assistive technologies.

 —
element Bindable HTMLDivElement | null | undefined null

Toolbar

Groups related controls.

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —