Toolbar API
View componentThe full prop reference for the Toolbar component. A container for grouping a set of controls.
Import
import { Toolbar } from '@structyl/styled';Props
Root
Container for toolbar components with focus management and keyboard navigation. Renders as a div with role="toolbar".
| Prop | Type | Default |
|---|---|---|
| asChild# | booleanWhen true, renders the component's children as the root element instead of rendering its own div. | — |
| orientation# | 'horizontal' | 'vertical'Defines whether the toolbar items are arranged horizontally or vertically. | 'horizontal' |
| dir# | 'ltr' | 'rtl'Sets the reading direction. Auto-detected from useDirection hook if not provided. | — |
| loop# | booleanWhen true, focus loops from the last to the first element and vice versa. | true |
| className# | stringCSS class name applied to the root element. Styled version applies default toolbar styles. | — |
| ...rest# | React.ComponentPropsWithoutRef<'div'>All standard HTML div attributes (id, aria-label, data-*, etc.) are supported. | — |
Button
A button element in the toolbar with roving focus and keyboard navigation support.
| Prop | Type | Default |
|---|---|---|
| disabled# | booleanWhen true, disables the button and removes it from the roving focus group. | — |
| className# | stringCSS class name applied to the button element. Styled version applies default button styles. | — |
| ...rest# | React.ComponentPropsWithoutRef<'button'>All standard HTML button attributes (type, onClick, title, aria-*, data-*, etc.) are supported. | — |
Link
An anchor element in the toolbar with roving focus support.
| Prop | Type | Default |
|---|---|---|
| className# | stringCSS class name applied to the link element. | — |
| href# | stringThe URL that the link points to. | — |
| ...rest# | React.ComponentPropsWithoutRef<'a'>All standard HTML anchor attributes (target, rel, title, aria-*, data-*, etc.) are supported. | — |
Separator
A visual separator element in the toolbar. Automatically adapts its orientation (vertical for horizontal toolbars, horizontal for vertical toolbars).
| Prop | Type | Default |
|---|---|---|
| className# | stringCSS class name applied to the separator element. Styled version applies default separator styles. | — |
| ...rest# | React.ComponentPropsWithoutRef<'div'>All standard HTML div attributes (aria-*, data-*, etc.) are supported. The role is set to 'separator' automatically. | — |
Source code
If you didn't find what you need here, read the component implementation .