Toolbar

A bordered, tinted panel that groups a set of interactive controls — buttons, toggles, menus — along a single axis.

View code

<Toolbar aria-label="Formatting">
	<Select aria-label="Block type">
		<Select.Option value="p">Paragraph</Select.Option>
		<Select.Option value="h2">Heading 2</Select.Option>
		<Select.Option value="quote">Quote</Select.Option>
	</Select>

	<Separator aria-orientation="vertical" />

	<ToggleButton aria-pressed="true" aria-label="Bold" variant="ghost" size="sm" mix={[pressToggle()]}>
		<BoldIcon />
	</ToggleButton>
	<ToggleButton aria-pressed="false" aria-label="Italic" variant="ghost" size="sm" mix={[pressToggle()]}>
		<ItalicIcon />
	</ToggleButton>
	<ToggleButton aria-pressed="false" aria-label="Underline" variant="ghost" size="sm" mix={[pressToggle()]}>
		<UnderlineIcon />
	</ToggleButton>

	<Separator aria-orientation="vertical" />

	<ToggleButton aria-pressed="false" aria-label="Inline code" variant="ghost" size="sm" mix={[pressToggle()]}>
		<CodeIcon />
	</ToggleButton>
	<ToggleButton aria-pressed="false" aria-label="Numbered list" variant="ghost" size="sm" mix={[pressToggle()]}>
		<ListOrderedIcon />
	</ToggleButton>
	<ToggleButton aria-pressed="false" aria-label="Bulleted list" variant="ghost" size="sm" mix={[pressToggle()]}>
		<ListIcon />
	</ToggleButton>

	<Separator aria-orientation="vertical" />

	<Button
		commandfor="preview-toolbar-more"
		command="toggle-popover"
		variant="ghost"
		size="sm"
		aria-label="More formatting"
	>
		<EllipsisIcon />
	</Button>
	<Menu id="preview-toolbar-more" aria-label="More formatting" mix={[menuKeys()]}>
		<Menu.Item>
			<Link2Icon aria-hidden="true" />
			Insert link
		</Menu.Item>
		<Menu.Separator />
		<Menu.Item danger>
			<Trash2Icon aria-hidden="true" />
			Clear formatting
		</Menu.Item>
	</Menu>
</Toolbar>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Toolbar } from "@sdxc/ui";

Renders a bordered, tinted panel grouping a set of interactive controls along one axis. The host carries the toolbar role and lays its children out as a row by default, flipping to a column when aria-orientation="vertical".

Examples

<Toolbar aria-label={t("editor.toolbar")} aria-orientation="vertical">
	<Button variant="ghost"><BoldIcon /></Button>
	<Button variant="ghost"><ItalicIcon /></Button>
</Toolbar>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"div">.

Types

Name	Values	What it decides
`Orientation`	`"horizontal" \| "vertical"`	Axis the toolbar's controls lay out along: a single row, or a single column.