Loading…

Canvas Toolbar

beta

A Figma-style tool rail: one active tool with a springy fill, a shape slot that swaps its tool from a flyout, and single-key shortcuts.

Navigation
1 file
2 npm packages
Accessibility notes

Playground

Installation

The CLI installs dropdown-menu and tooltip as well, because this component imports them. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add canvas-toolbar

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { CanvasToolbar } from "@/components/ui/canvas-toolbar";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Shape Flyout
Global Shortcuts
Vertical
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<CanvasToolbar>

Prop	Type	Default
`tools` (required) Tools, dividers and swappable slots, in order.	`CanvasToolbarItem[]`	—
`corner` Radius of the rail and flyout in px; tools use `corner - 4`.	`number`	`14`
`defaultValue` The initially active tool. Defaults to the first tool.	`string`	—
`flyoutClassName` Extra classes for the flyout panel.	`string`	—
`globalShortcuts` Listen for shortcuts on the whole document, not only while focus is in the toolbar. Keys typed into inputs, textareas and contenteditable are ignored.	`boolean`	`false`
`onValueChange`	`(value: string) => void`	—
`side` Which side the flyout and tooltips open on. Defaults to top (or the inline end when vertical).	`Side`	—
`stroke`	`boolean`	—
`tone`	`"default" \| "inverted"`	`"default"`
`tooltips` Show each tool's name (and shortcut) in a tooltip.	`boolean`	`true`
`value` The active tool (controlled).	`string`	—

Every prop of Radix UI’s Toolbar.Root, plus className.

Accessibility

Built on Radix Toolbar: role="toolbar" (name it with aria-label; it warns in development when unnamed) with one tab stop, arrow keys that follow the reading direction, Home/End and wrap-around. Tools are toggle buttons named by their label, with aria-pressed on the single active tool and aria-keyshortcuts when a shortcut is set; a tooltip repeats the name and key. The slot is a named group; its notch is a menu button (aria-haspopup="menu", aria-expanded) opening Dowel's DropdownMenu, where shapes are menuitemradio items reachable with Left/Right as well as Up/Down. Escape closes the flyout and returns focus to the notch; picking a shape returns focus to the slot's tool. Shortcuts work while focus is in the toolbar, or on the whole document with globalShortcuts, and are ignored in inputs, textareas, contenteditable and open menus. The fill pop and the flyout entrance are decoration and stop under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

tools

Tools, dividers and swappable slots, in order.

CanvasToolbarItem[]

—

corner

Radius of the rail and flyout in px; tools use corner - 4.

number

14

defaultValue

The initially active tool. Defaults to the first tool.

string

—

flyoutClassName

Extra classes for the flyout panel.

string

—

globalShortcuts

Listen for shortcuts on the whole document, not only while focus is in the toolbar. Keys typed into inputs, textareas and contenteditable are ignored.

boolean

false

onValueChange

(value: string) => void

—

side

Which side the flyout and tooltips open on. Defaults to top (or the inline end when vertical).

Side

—

stroke

boolean

—

tone

"default" | "inverted"

"default"

tooltips

Show each tool's name (and shortcut) in a tooltip.

boolean

true

value

The active tool (controlled).

string

—