Toolbar
A container for grouping related actions or controls.
Installation
pnpm dlx shadcn@latest add @columbus/toolbarUsage
Toolbar parts have no styles of their own. Use render to style them as a
Button, Toggle, or another
control.
import { Button } from "@/components/ui/button";
import { Toggle } from "@/components/ui/toggle";
import {
Toolbar,
ToolbarButton,
ToolbarGroup,
ToolbarSeparator,
} from "@/components/ui/toolbar";
<Toolbar aria-label="Formatting">
<ToolbarGroup>
<ToolbarButton render={<Toggle />}>Bold</ToolbarButton>
<ToolbarButton render={<Toggle />}>Underline</ToolbarButton>
</ToolbarGroup>
<ToolbarSeparator />
<ToolbarButton render={<Button />}>Save</ToolbarButton>
</Toolbar>;Accessibility
A toolbar is one tab stop. The arrow keys move between its items. Give the
toolbar an aria-label, and give icon-only buttons an aria-label too.
Text formatting
API reference
Toolbar wraps Base UI Toolbar. Each part accepts the props of its Base UI counterpart.
| Part | Base UI part |
|---|---|
Toolbar | Toolbar.Root |
ToolbarGroup | Toolbar.Group |
ToolbarButton | Toolbar.Button |
ToolbarLink | Toolbar.Link |
ToolbarInput | Toolbar.Input |
ToolbarSeparator | Toolbar.Separator |
Prop
Type