Toolbar

Actions along a row, with optional shortcuts.

import { Toolbar } from '@textui/core';

<Toolbar
  items={[
    { id: 'run', label: 'Run', shortcut: 'ctrl+r' },
    { id: 'stop', label: 'Stop', disabled: true },
  ]}
  onSelect={(id) => console.log(id)}
/>

Props

| Prop | Type | Default | | | — | — | — | — | | items | { id: string; label: string; icon?: string; shortcut?: string; disabled?: boolean; tone?: 'default' \| 'primary' \| 'secondary' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'muted' }[] | required | | | onSelect | (id: string) => void | | |

Plus everything on BoxProps.

Role: toolbar.

Like Menu, shortcut is drawn and not registered.

A toolbar is horizontal and space is scarce, so the ids should be commands - the same action then reaches the palette and a chord without a second implementation.

See also

• Menu - the same actions, vertically, with submenus
• Button - one action rather than a set