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
itemswithcontentand optionalplacement; placement defaults toautomatic. - Placements are
navigation,cancellationAction,principal,automatic,confirmationAction, anddestructiveAction, rendered in that stable group order. - Uses
role="toolbar"; supplyaria-labeloraria-labelledbyand accessible action labels. - Use destructive placement for dangerous actions, keep actions consistent and reachable on mobile, and set a local
glassoverride when needed.
More examples
With Destructive Action
API reference
| Prop | Type | Required | Description |
|---|---|---|---|
items | IToolbarItem[] | Yes | Toolbar items |
glass | boolean | { enabled?: boolean; intensity?: number; variant?: 'regular' | 'clear' } | No | Local 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.