Toolbar
A group of controls with roving arrow-key focus.
Real use · text formatting toolbar
Sizes
Variant + dividers · bulk-selection bar
Dividers · card header
Glass · floating action bar
Center region · start / center / end
Using Toolbar
Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.
Plain HTML — CSS classes
The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Toolbar — it needs no JavaScript, so the classes below are the whole story.
/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";Root class toolbar, with 5 modifiers:
.toolbar.toolbar-button.toolbar-center.toolbar-group.toolbar-link.toolbar-separator
React
Typed components over those same classes, with behavior and accessibility from Base UI.
npm i @wizeworks/silicaui-reactimport { Toolbar } from "@wizeworks/silicaui-react";Source of the demo above
The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.
Show source
import { useState } from "react";
import {
Toolbar,
ToolbarButton,
ToolbarCenter,
ToolbarGroup,
ToolbarLink,
ToolbarSeparator,
} from "@wizeworks/silicaui-react";
import { Section, Stack } from "../lib/Section";
function BoldIcon() {
return (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z" strokeLinejoin="round" />
</svg>
);
}
function ItalicIcon() {
return (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M15 4h-5M14 20H9M14 4l-4 16" strokeLinecap="round" />
</svg>
);
}
function UnderlineIcon() {
return (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M7 4v6a5 5 0 0 0 10 0V4M6 21h12" strokeLinecap="round" />
</svg>
);
}
function PlusIcon() {
return (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 5v14M5 12h14" strokeLinecap="round" />
</svg>
);
}
function TrashIcon() {
return (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function ToolbarDemo() {
const [format, setFormat] = useState<string[]>(["bold"]);
const toggle = (key: string) =>
setFormat((f) => (f.includes(key) ? f.filter((k) => k !== key) : [...f, key]));
return (
<>
<Section title="Real use · text formatting toolbar">
<Toolbar aria-label="Formatting">
<ToolbarGroup>
<ToolbarButton
aria-pressed={format.includes("bold")}
onClick={() => toggle("bold")}
>
<BoldIcon />
</ToolbarButton>
<ToolbarButton
aria-pressed={format.includes("italic")}
onClick={() => toggle("italic")}
>
<ItalicIcon />
</ToolbarButton>
<ToolbarButton
aria-pressed={format.includes("underline")}
onClick={() => toggle("underline")}
>
<UnderlineIcon />
</ToolbarButton>
</ToolbarGroup>
<ToolbarSeparator />
<ToolbarLink href="#">Help</ToolbarLink>
</Toolbar>
</Section>
<Section title="Sizes">
<Stack className="items-start">
{(["sm", "md", "lg"] as const).map((size) => (
<Toolbar key={size} aria-label={`${size} toolbar`} size={size}>
<ToolbarButton>
<PlusIcon />
Add
</ToolbarButton>
<ToolbarSeparator />
<ToolbarLink href="#">{size}</ToolbarLink>
</Toolbar>
))}
</Stack>
</Section>
<Section title="Variant + dividers · bulk-selection bar">
<div className="w-full max-w-md rounded-box border border-base-300">
<Toolbar aria-label="Bulk actions" size="sm" variant="muted" dividers="bottom" className="w-full">
<ToolbarGroup>
<span className="px-1 text-xs font-medium opacity-70">3 selected</span>
</ToolbarGroup>
<ToolbarSeparator />
<ToolbarGroup>
<ToolbarButton>
<TrashIcon />
</ToolbarButton>
</ToolbarGroup>
<ToolbarLink href="#" className="ml-auto">
Deselect all
</ToolbarLink>
</Toolbar>
<div className="p-4 text-sm opacity-60">…table content…</div>
</div>
</Section>
<Section title="Dividers · card header">
<div className="w-full max-w-md rounded-box border border-base-300">
<Toolbar aria-label="Card actions" dividers="bottom" className="w-full">
<span className="px-1 text-sm font-semibold">Card title</span>
<ToolbarButton className="ml-auto">
<PlusIcon />
</ToolbarButton>
</Toolbar>
<div className="p-4 text-sm opacity-60">…card content…</div>
</div>
</Section>
<Section title="Glass · floating action bar">
<div
className="flex justify-center rounded-box p-16"
style={{
backgroundImage:
"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))",
}}
>
<Toolbar aria-label="Floating actions" className="glass">
<ToolbarGroup>
<ToolbarButton>
<PlusIcon />
Add
</ToolbarButton>
<ToolbarButton>
<TrashIcon />
</ToolbarButton>
</ToolbarGroup>
<ToolbarSeparator />
<ToolbarLink href="#">Help</ToolbarLink>
</Toolbar>
</div>
</Section>
<Section title="Center region · start / center / end">
<div className="w-full max-w-md rounded-box border border-base-300">
<Toolbar aria-label="Section navigation" dividers="bottom" className="w-full">
<ToolbarGroup />
<ToolbarCenter>
<ToolbarGroup>
<ToolbarButton aria-pressed={true}>Overview</ToolbarButton>
<ToolbarButton aria-pressed={false}>Analytics</ToolbarButton>
<ToolbarButton aria-pressed={false}>Settings</ToolbarButton>
</ToolbarGroup>
</ToolbarCenter>
<ToolbarGroup>
<ToolbarButton>
<PlusIcon />
</ToolbarButton>
</ToolbarGroup>
</Toolbar>
</div>
</Section>
</>
);
}Vanilla — node tree to HTML
Toolbar — size/variant/dividers are props on the source node, forwarded as data-attrs the CSS reads (mirrors DrawerContent's data-side below). Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.
npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviorsimport { atom, toHtml } from "@wizeworks/silicaui-html";
const node = atom("Toolbar", "toolbar", { /* props */ }, [/* children */]);
const markup = toHtml(node);Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "toolbar toolbar-primary" rather than passing a colour as a prop.
- Takes children
- yes
- Hydrated by
- nothing — this one is static markup
The full API for Toolbar, on every path, is available through the Silica MCP server.