Toolbar

Toolbar groups formatting and tool toggles the way an editor does. Toolbar.ToggleGroup manages a single or multiple selection of Toolbar.ToggleItems, Toolbar.Toggle is an independent toggle, and Toolbar.Divider separates sections. Every toggle shares one tab stop, so a long toolbar costs keyboard users a single Tab.

Examples

Properties

Playground

Basics

Group toggles with Toolbar.ToggleGroup, separate sections with Toolbar.Divider, and add independent Toolbar.Toggles. Every toggle shares one tab stop; arrow keys move between them.

Loading demo…

import { useState } from 'react';

import { Toolbar } from '@plocks/ui';

export function Demo() {
  const [formatting, setFormatting] = useState<(string | number)[]>(['bold']);
  const [alignment, setAlignment] = useState<string | number | null>('left');

  return (
    <Toolbar accessibilityLabel="Text formatting">
      <Toolbar.ToggleGroup type="multiple" value={formatting} onChange={setFormatting} accessibilityLabel="Style">
        <Toolbar.ToggleItem value="bold" icon="bold" accessibilityLabel="Bold" />
        <Toolbar.ToggleItem value="italic" icon="italic" accessibilityLabel="Italic" />
        <Toolbar.ToggleItem value="underline" icon="underline" accessibilityLabel="Underline" />
      </Toolbar.ToggleGroup>
      <Toolbar.Divider />
      <Toolbar.ToggleGroup value={alignment} onChange={setAlignment} accessibilityLabel="Alignment">
        <Toolbar.ToggleItem value="left" icon="alignLeft" accessibilityLabel="Align left" />
        <Toolbar.ToggleItem value="center" icon="alignCenter" accessibilityLabel="Align center" />
        <Toolbar.ToggleItem value="right" icon="alignRight" accessibilityLabel="Align right" />
      </Toolbar.ToggleGroup>
      <Toolbar.Divider />
      <Toolbar.Toggle icon="link" accessibilityLabel="Insert link" />
    </Toolbar>
  );
}

Toggle groups

type="multiple" keeps any number of items active and reports an array. type="single" keeps one, and pressing it again deselects it and reports null.

Loading demo…

import { Column, Text, Toolbar } from '@plocks/ui';

export function Demo() {
  return (
    <Column gap="lg">
      <Column gap="xs">
        <Text fw="semibold">multiple</Text>
        <Toolbar>
          <Toolbar.ToggleGroup type="multiple" defaultValue={['bold', 'italic']} accessibilityLabel="Style">
            <Toolbar.ToggleItem value="bold" icon="bold" accessibilityLabel="Bold" />
            <Toolbar.ToggleItem value="italic" icon="italic" accessibilityLabel="Italic" />
            <Toolbar.ToggleItem value="underline" icon="underline" accessibilityLabel="Underline" />
            <Toolbar.ToggleItem value="strike" icon="strikethrough" accessibilityLabel="Strikethrough" />
          </Toolbar.ToggleGroup>
        </Toolbar>
      </Column>
      <Column gap="xs">
        <Text fw="semibold">single</Text>
        <Toolbar>
          <Toolbar.ToggleGroup type="single" defaultValue="center" accessibilityLabel="Alignment">
            <Toolbar.ToggleItem value="left" icon="alignLeft" accessibilityLabel="Align left" />
            <Toolbar.ToggleItem value="center" icon="alignCenter" accessibilityLabel="Align center" />
            <Toolbar.ToggleItem value="right" icon="alignRight" accessibilityLabel="Align right" />
            <Toolbar.ToggleItem value="justify" icon="alignJustify" accessibilityLabel="Justify" />
          </Toolbar.ToggleGroup>
        </Toolbar>
      </Column>
    </Column>
  );
}

Variants and color

variant and color on the toolbar apply to every toggle inside. light tints active toggles; filled gives them a solid accent fill with legible content.

Loading demo…

import { Column, Text, Toolbar } from '@plocks/ui';

const variants = ['light', 'filled'] as const;

export function Demo() {
  return (
    <Column gap="lg">
      {variants.map((variant) => (
        <Column key={variant} gap="xs">
          <Text fw="semibold">{variant}</Text>
          <Toolbar variant={variant} color="success">
            <Toolbar.ToggleGroup type="multiple" defaultValue={['bold']} accessibilityLabel="Style">
              <Toolbar.ToggleItem value="bold" icon="bold" accessibilityLabel="Bold" />
              <Toolbar.ToggleItem value="italic" icon="italic" accessibilityLabel="Italic" />
              <Toolbar.ToggleItem value="underline" icon="underline" accessibilityLabel="Underline" />
            </Toolbar.ToggleGroup>
            <Toolbar.Divider />
            <Toolbar.Toggle icon="link" defaultActive accessibilityLabel="Insert link" />
          </Toolbar>
        </Column>
      ))}
    </Column>
  );
}

Sizes

size sets the toggle height (the same scale as Button), along with the toolbar's padding and gap.

Loading demo…

import { Column, Text, Toolbar } from '@plocks/ui';

const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export function Demo() {
  return (
    <Column gap="lg">
      {sizes.map((size) => (
        <Column key={size} gap="xs">
          <Text fw="semibold">{size}</Text>
          <Toolbar size={size}>
            <Toolbar.ToggleGroup type="multiple" defaultValue={['bold']} accessibilityLabel="Style">
              <Toolbar.ToggleItem value="bold" icon="bold" accessibilityLabel="Bold" />
              <Toolbar.ToggleItem value="italic" icon="italic" accessibilityLabel="Italic" />
              <Toolbar.ToggleItem value="underline" icon="underline" accessibilityLabel="Underline" />
            </Toolbar.ToggleGroup>
            <Toolbar.Divider />
            <Toolbar.Toggle icon="undo" accessibilityLabel="Undo" />
            <Toolbar.Toggle icon="redo" accessibilityLabel="Redo" />
          </Toolbar>
        </Column>
      ))}
    </Column>
  );
}

Vertical orientation

A vertical toolbar stacks its toggles, draws dividers across, and moves focus with the Up and Down arrow keys.

Loading demo…

import { Toolbar } from '@plocks/ui';

export function Demo() {
  return (
    <Toolbar orientation="vertical" accessibilityLabel="Drawing tools">
      <Toolbar.ToggleGroup type="single" defaultValue="text" accessibilityLabel="Tool">
        <Toolbar.ToggleItem value="text" icon="text" accessibilityLabel="Text" />
        <Toolbar.ToggleItem value="heading" icon="heading" accessibilityLabel="Heading" />
        <Toolbar.ToggleItem value="quote" icon="quote" accessibilityLabel="Quote" />
        <Toolbar.ToggleItem value="code" icon="code" accessibilityLabel="Code" />
      </Toolbar.ToggleGroup>
      <Toolbar.Divider />
      <Toolbar.Toggle icon="list" accessibilityLabel="Bulleted list" />
      <Toolbar.Toggle icon="listOrdered" accessibilityLabel="Numbered list" />
    </Toolbar>
  );
}

Text labels

An icon-only toggle is square. A toggle with a text label sizes to its content, as does an icon toggle with autoWidth.

Loading demo…

import { Toolbar } from '@plocks/ui';

export function Demo() {
  return (
    <Toolbar accessibilityLabel="Document actions">
      <Toolbar.ToggleGroup type="multiple" defaultValue={['bold']} accessibilityLabel="Style">
        <Toolbar.ToggleItem value="bold" icon="bold" accessibilityLabel="Bold" />
        <Toolbar.ToggleItem value="italic" icon="italic" accessibilityLabel="Italic" />
      </Toolbar.ToggleGroup>
      <Toolbar.Divider />
      <Toolbar.Toggle icon="save" defaultActive>Save</Toolbar.Toggle>
      <Toolbar.Toggle>Cancel</Toolbar.Toggle>
      <Toolbar.Toggle icon="share" autoWidth accessibilityLabel="Share" />
    </Toolbar>
  );
}

Disabled

Disable one item with disabled on it, or a whole group with disabled on Toolbar.ToggleGroup. Disabled toggles are skipped by arrow-key navigation.

Loading demo…

import { Toolbar } from '@plocks/ui';

export function Demo() {
  return (
    <Toolbar accessibilityLabel="Text formatting">
      <Toolbar.ToggleGroup type="multiple" defaultValue={['bold']} accessibilityLabel="Style">
        <Toolbar.ToggleItem value="bold" icon="bold" accessibilityLabel="Bold" />
        <Toolbar.ToggleItem value="italic" icon="italic" accessibilityLabel="Italic" disabled />
        <Toolbar.ToggleItem value="underline" icon="underline" accessibilityLabel="Underline" />
      </Toolbar.ToggleGroup>
      <Toolbar.Divider />
      <Toolbar.ToggleGroup type="single" defaultValue="left" disabled accessibilityLabel="Alignment">
        <Toolbar.ToggleItem value="left" icon="alignLeft" accessibilityLabel="Align left" />
        <Toolbar.ToggleItem value="center" icon="alignCenter" accessibilityLabel="Align center" />
        <Toolbar.ToggleItem value="right" icon="alignRight" accessibilityLabel="Align right" />
      </Toolbar.ToggleGroup>
    </Toolbar>
  );
}

Scan to open this page on your phoneplocks.dev/ui/Toolbar

React Native design for iOS, Android, and Web.

Quick Links

Components Charts Hooks Add-ons & extensions

Docs

Getting Started Examples Localization Accessibility

Agents

llms.txt Skills Sitemap

Resources

FAQ Changelog Contributing