Toolbar · base-ui-svelte

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Toolbar.Root

A container for grouping a set of controls, such as buttons, toggle groups, or menus. Renders a <div> element.

Props

orientation ToolbarOrientation 'horizontal'

Name: orientation
Description: The orientation of the toolbar.
Type: ToolbarOrientation
Default: 'horizontal'

loopFocus boolean true

Name: loopFocus
Description: Loop arrow-key focus at the ends.
Type: boolean
Default: true

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ orientation: ToolbarOrientation }]>

Data attributes

Attribute	Description
`data-disabled`	Present when the toolbar is disabled.
`data-orientation`	Indicates the orientation of the toolbar.

Toolbar.Button

A button that can be used as-is or as a trigger for other components. Renders a <button> element.

Props

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

focusableWhenDisabled boolean false

Name: focusableWhenDisabled
Description: Whether the control remains focusable when disabled.
Type: boolean
Default: false

type 'button' | 'submit' | 'reset' —

Name: type
Description: Native control type when rendering a native element.
Type: 'button' | 'submit' | 'reset' | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ disabled: boolean }]>

Data attributes

Attribute	Description
`data-disabled`	Present when the button is disabled.
`data-orientation`	Indicates the orientation of the toolbar.

Toolbar.Group

Groups several toolbar items or toggles. Renders a <div> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-orientation`	Indicates the orientation of the toolbar.

Toolbar.Input

A native input element that integrates with Toolbar keyboard navigation. Renders an <input> element.

Props

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

focusableWhenDisabled boolean false

Name: focusableWhenDisabled
Description: Whether the control remains focusable when disabled.
Type: boolean
Default: false

value string —

Name: value
Description: Controlled value.
Type: string | undefined

defaultValue string —

Name: defaultValue
Description: Uncontrolled initial value.
Type: string

onValueChange function —

Name: onValueChange
Description: Event handler called when the value changes.
Type: ((value: string, event: Event) => void) | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-disabled`	Present when the input is disabled.
`data-orientation`	Indicates the orientation of the toolbar.

Toolbar.Link

A link component. Renders an <a> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-orientation`	Indicates the orientation of the toolbar.

Toolbar.Separator

A separator element accessible to screen readers. Renders a <div> element.

Props

orientation ToolbarOrientation 'horizontal'

Name: orientation
Description: The orientation of the separator. Defaults to the opposite of the toolbar's orientation, so a horizontal toolbar renders vertical separators.
Type: ToolbarOrientation | undefined
Default: 'horizontal'

Data attributes

Attribute	Description
`data-orientation`	Indicates the orientation of the separator, which is perpendicular to the toolbar.