Toolbar

Measured whole-group actions with scoped overflow and independent filter controls.@gemologic/sheen-patterns · application

Playground

This example has no scalar controls. Its validated source remains interactive below.

<Toolbar label="Document actions" groups={[{ id: "file", label: "File", items: [{ kind: "action", id: "save", label: "Save", onSelect: () => {} }] }]} />

Variant matrix

Document actions

Anatomy

Package

@gemologic/sheen-patterns

Source

packages/patterns/src/Toolbar.tsx

Tokens

--sheen-space-inline-sm
--sheen-color-border
--sheen-control-h-md

Accessibility

Role: toolbar, group, menuKeyboard: Tab, Shift+Tab, ArrowLeft, ArrowRight, Home, End, Enter, Space, Escape

Do

Keep IDs stable across state updates.
Provide three or more actions when using toolbar navigation.

Do not

Do not put text inputs into action groups; use the filter slot.
Do not use action items for URL navigation.

Generated props

Name	Type	Default	Description
`label` *	`string`	—	Required nonempty accessible action-toolbar name.
`groups` *	`readonly ToolbarGroup[]`	—	Ordered groups with stable IDs and labels, each containing sheen action or checkbox menu items. Whole trailing groups overflow together.
`filter`	`JSX.Element`	—	Persistent filter controls outside the action toolbar's arrow-key navigation.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.