Iryx UINavigation
IToolbar
A bar of controls sharing one Tab stop, with arrow keys moving between them.
Last action: —
Entries
Three kinds: a button, a link (give it an href), and '-' for a separator between groups. Each control is a ghost IButton.
const items: ToolbarEntry[] = [
{ label: 'Undo', icon: UndoIcon, onSelect: undo },
{ label: 'Docs', icon: BookIcon, href: '/docs' },
'-',
{ label: 'Delete', icon: TrashIcon, disabled: true },
]Icon-only
iconOnly hides the label and squares the control, keeping the label as the control's accessible name.
Anything else goes in the slot
Entries cover buttons, links and separators. For a toggle group, a select or a search field, use the default slot. IToggleGroup brings its own arrow-key handling and nests inside without fighting the toolbar for the same keys.
Marks: Bold
Vertical
Bare
Drops the container so the controls sit directly on the page.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ToolbarEntry[] | [] | Ignored when the default slot is used |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Also decides which arrow keys move focus |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'sm' | |
bare | boolean | false | Drop the container |
loop | boolean | false | Wrap from the last control back to the first |
ariaLabel | string | — | Names the bar |
unstyled | boolean | — | Skip built-in classes |
ui | { root?, button?, separator? } | — | Per-slot class overrides |
ToolbarButtonOption
| Field | Type | Description |
|---|---|---|
label | string | |
icon | IconLike | |
onSelect | () => void | Ignored on a link |
href | string | Renders a link instead of a button |
disabled | boolean | |
iconOnly | boolean | Hide the label, keep it as the name |
ariaLabel | string | Overrides that name |
Slots
| Slot | Description |
|---|---|
default | Replaces the generated controls entirely |
Accessibility
Give the bar a name with ariaLabel. It takes a single Tab stop, and arrow keys move between the controls along the axis orientation sets. Set loop to wrap around at the ends.