Skip to main content
components

Toolbar

Connected actions in a shared, sticky toolbar surface.

Package@g4rcez/componentsSectionFloating Elements

Examples

Basic Toolbar

Place buttons directly inside Toolbar. Adjacent edges are square; only the ends are rounded.

tsx
import { Button, Toolbar } from "@g4rcez/components";

<Toolbar aria-label="Document actions">
  <Button theme="ghost-neutral" size="small">File</Button>
  <Button theme="ghost-neutral" size="small">Edit</Button>
  <Button theme="ghost-neutral" size="small">View</Button>
  <Button theme="ghost-neutral" size="small">Help</Button>
</Toolbar>

Rich Text Toolbar

Icon buttons share the same connected layout. Give each control an accessible name.

tsx
import { Button, Toolbar } from "@g4rcez/components";
import { TextBIcon, TextItalicIcon, TextUnderlineIcon, LinkIcon } from "@phosphor-icons/react";

<Toolbar aria-label="Text formatting">
  <Button theme="ghost-neutral" size="icon" aria-label="Bold"><TextBIcon /></Button>
  <Button theme="ghost-neutral" size="icon" aria-label="Italic"><TextItalicIcon /></Button>
  <Button theme="ghost-neutral" size="icon" aria-label="Underline"><TextUnderlineIcon /></Button>
  <Button theme="ghost-neutral" size="icon" aria-label="Insert link"><LinkIcon /></Button>
</Toolbar>

Selection Toolbar

Button themes and disabled states are preserved within the connected group.

tsx
import { Button, Toolbar } from "@g4rcez/components";

<Toolbar aria-label="Selection actions">
  <Button theme="danger" size="small">Delete</Button>
  <Button theme="secondary" size="small">Export</Button>
  <Button theme="muted" size="small" disabled>Archive</Button>
</Toolbar>

When to use Toolbar

Use when

You need the documented Toolbar interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Toolbar behavior you need.

Accessibility

Keep the Toolbar labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

  • Keep keyboard focus visible and follow the documented key commands.
  • Provide an accessible name and connect descriptions or errors to the control.