Components

Toolbar

Arrange actions in a horizontal toolbar.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { Button, Text } from '@swiftuijs/ui';
import { Toolbar } from '@swiftuijs/ui';
export default function Example() {
    return (<Toolbar aria-label="Editor actions" items={[
            { content: <Button>Back</Button>, placement: 'navigation' },
            { content: <Button>Cancel</Button>, placement: 'cancellationAction' },
            { content: <Text style={{ fontWeight: 'bold' }}>Title</Text>, placement: 'principal' },
            { content: <Button>Done</Button>, placement: 'confirmationAction' },
        ]}></Toolbar>);
}

With Destructive Action

Include destructive actions:

Usage and limitations

  • Provide items with content and optional placement; placement defaults to automatic.
  • Placements are navigation, cancellationAction, principal, automatic, confirmationAction, and destructiveAction, rendered in that stable group order.
  • Uses role="toolbar"; supply aria-label or aria-labelledby and accessible action labels.
  • Use destructive placement for dangerous actions, keep actions consistent and reachable on mobile, and set a local glass override when needed.

More examples

With Destructive Action

API reference

PropTypeRequiredDescription
itemsIToolbarItem[]YesToolbar items
glassboolean | { enabled?: boolean; intensity?: number; variant?: 'regular' | 'clear' }NoLocal material override. Intensity is clamped to 0–1; zero uses an opaque surface. Default: Inherited from UIProvider; off without a provider

Inherits additional props from IBaseElementComponent<'div'>, GlassSurfaceProps.