base-ui-svelte

Toolbar

A container for grouping a set of controls.

View as Markdown

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

Extends div HTML attributes.

PropertyTypeDefaultDescription
orientationToolbarOrientation'horizontal'
childrenSnippet<[{ orientation: ToolbarOrientation }]>Content rendered inside the part.
Data attributeDescription
data-orientationThe orientation of the component.

Toolbar.Button

Extends button HTML attributes.

PropertyTypeDefaultDescription
disabledbooleanfalseWhether the control ignores user interaction.
focusableWhenDisabledbooleanfalseWhether the control remains focusable when disabled.
type'button' | 'submit' | 'reset' | undefinedNative control type when rendering a native element.
childrenSnippet<[{ disabled: boolean }]>Content rendered inside the part.
Data attributeDescription
data-disabledPresent when the part is disabled.
data-orientationThe orientation of the component.

Toolbar.Group

Extends div HTML attributes.

PropertyTypeDefaultDescription
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-orientationThe orientation of the component.

Toolbar.Input

Extends input HTML attributes.

PropertyTypeDefaultDescription
disabledbooleanfalseWhether the control ignores user interaction.
focusableWhenDisabledbooleanfalseWhether the control remains focusable when disabled.
valuestring | undefinedControlled value.
defaultValuestringUncontrolled initial value.
onValueChange((value: string, event: Event) => void) | undefinedEvent handler called when the value changes.
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-disabledPresent when the part is disabled.
data-orientationThe orientation of the component.

Toolbar.Link

Extends anchor HTML attributes.

PropertyTypeDefaultDescription
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-orientationThe orientation of the component.

Toolbar.Separator

Extends div HTML attributes.

PropertyTypeDefaultDescription
orientationToolbarOrientation | undefined'horizontal'
Data attributeDescription
data-orientationThe orientation of the component.