Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.
Toolbar
A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.
import { Toolbar } from "@radix-solid/primitives";
import { StrikethroughIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, FontBoldIcon, FontItalicIcon } from "@radix-solid/icons";
import styles from "./styles.module.css";
const ToolbarDemo = () => <Toolbar.Root class={styles.Root} aria-label="Formatting options">
<Toolbar.ToggleGroup type="multiple" aria-label="Text formatting">
<Toolbar.ToggleItem class={styles.ToggleItem} value="bold" aria-label="Bold">
<FontBoldIcon />
</Toolbar.ToggleItem>
<Toolbar.ToggleItem class={styles.ToggleItem} value="italic" aria-label="Italic">
<FontItalicIcon />
</Toolbar.ToggleItem>
<Toolbar.ToggleItem class={styles.ToggleItem} value="strikethrough" aria-label="Strike through">
<StrikethroughIcon />
</Toolbar.ToggleItem>
</Toolbar.ToggleGroup>
<Toolbar.Separator class={styles.Separator} />
<Toolbar.ToggleGroup type="single" defaultValue="center" aria-label="Text alignment">
<Toolbar.ToggleItem class={styles.ToggleItem} value="left" aria-label="Left aligned">
<TextAlignLeftIcon />
</Toolbar.ToggleItem>
<Toolbar.ToggleItem class={styles.ToggleItem} value="center" aria-label="Center aligned">
<TextAlignCenterIcon />
</Toolbar.ToggleItem>
<Toolbar.ToggleItem class={styles.ToggleItem} value="right" aria-label="Right aligned">
<TextAlignRightIcon />
</Toolbar.ToggleItem>
</Toolbar.ToggleGroup>
<Toolbar.Separator class={styles.Separator} />
<Toolbar.Link class={styles.Link} href="#" target="_blank" style={{
"margin-right": "10px"
}}>
Edited 2 hours ago
</Toolbar.Link>
<Toolbar.Button class={styles.Button} style={{
"margin-left": "auto"
}}>
Share
</Toolbar.Button>
</Toolbar.Root>;
export default ToolbarDemo;Features
Full keyboard navigation.
Anatomy
Import the component.
import { Toolbar } from "@radix-solid/primitives";
export default () => <Toolbar.Root>
<Toolbar.Button />
<Toolbar.Separator />
<Toolbar.Link />
<Toolbar.ToggleGroup type="single">
<Toolbar.ToggleItem value="bold" aria-label="Bold" />
</Toolbar.ToggleGroup>
</Toolbar.Root>;API Reference
Root
Contains all the toolbar component parts.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
orientationThe orientation of the toolbar. | enum | "horizontal" |
dirThe reading direction of the toolbar. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode. | enum | — |
loopWhen true, keyboard navigation will loop from last tab to first, and vice versa. | boolean | true |
| Data attribute | Values |
|---|---|
[data-orientation] | "vertical" | "horizontal" |
Button
A button item.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
| Data attribute | Values |
|---|---|
[data-orientation] | "vertical" | "horizontal" |
Link
A link item.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
ToggleGroup
A set of two-state buttons that can be toggled on or off.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
type*Determines whether a single or multiple items can be pressed at a time. | enum | — |
valueThe controlled value of the pressed item when type is "single". Must be used in conjunction with onValueChange. | string | — |
defaultValueThe value of the item to show as pressed when initially rendered and type is "single". Use when you do not need to control the state of the items. | string | — |
onValueChangeEvent handler called when the pressed state of an item changes and type is "single". | function | — |
valueThe controlled value of the pressed items when type is "multiple". Must be used in conjunction with onValueChange. | string[] | [] |
defaultValueThe values of the items to show as pressed when initially rendered and type is "multiple". Use when you do not need to control the state of the items. | string[] | [] |
onValueChangeEvent handler called when the pressed state of an item changes and type is "multiple". | function | — |
disabledWhen true, prevents the user from interacting with the toggle group and all its items. | boolean | false |
| Data attribute | Values |
|---|---|
[data-orientation] | "vertical" | "horizontal" |
ToggleItem
An item in the group.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
value*A unique value for the item. | string | — |
disabledWhen true, prevents the user from interacting with the item. | boolean | — |
| Data attribute | Values |
|---|---|
[data-state] | "on" | "off" |
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Separator
Used to visually separate items in the toolbar.
| Prop | Type | Default |
|---|---|---|
asChildRender through a single-target factory, merging props and behavior with the chosen host.Read our Composition guide for more details. | boolean | false |
| Data attribute | Values |
|---|---|
[data-orientation] | "vertical" | "horizontal" |
Examples
Use with other primitives
All our primitives which expose a Trigger part, such as Dialog, AlertDialog, Popover, DropdownMenu can be composed within a toolbar by using the asChild prop.
Here is an example using our DropdownMenu primitive.
import { Toolbar, DropdownMenu } from "@radix-solid/primitives";
export default () => <Toolbar.Root>
<Toolbar.Button>Action 1</Toolbar.Button>
<Toolbar.Separator />
<DropdownMenu.Root>
<Toolbar.Button asChild>{target => target(DropdownMenu.Trigger, {
children: <>Trigger</>
})}</Toolbar.Button>
<DropdownMenu.Content>…</DropdownMenu.Content>
</DropdownMenu.Root>
</Toolbar.Root>;Accessibility
Uses roving tabindex to manage focus movement among items.
Keyboard Interactions
| Key | Description |
|---|---|
Tab | Moves focus to the first item in the group. |
Space | Activates/deactivates the item. |
Enter | Activates/deactivates the item. |
ArrowDown | Moves focus to the next item depending on orientation. |
ArrowRight | Moves focus to the next item depending on orientation. |
ArrowUp | Moves focus to the previous item depending on orientation. |
ArrowLeft | Moves focus to the previous item depending on orientation. |
Home | Moves focus to the first item. |
End | Moves focus to the last item. |