Toolbar

<Toolbar 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>

<Toolbar items={[
      { content: <Button>Back</Button>, placement: 'navigation' },
      { content: <Button>Cancel</Button>, placement: 'cancellationAction' },
      { content: <Text style={{ fontWeight: 'bold' }}>Edit</Text>, placement: 'principal' },
      { content: <Button>Delete</Button>, placement: 'destructiveAction' },
    ]}></Toolbar>

Overview

Toolbar is a view that displays toolbar items. Toolbar provides a consistent way to display actions and controls, typically at the bottom of the screen.

SwiftUI Correspondence: Similar to SwiftUI's .toolbar() modifier.

With Destructive Action

Include destructive actions:

Notes

• Toolbar renders as a horizontal role="toolbar" region.
• Use aria-label or aria-labelledby so assistive technology can describe the toolbar purpose.
• Toolbar requires an array of items with content and placement.
• Placement options: navigation, cancellationAction, principal, automatic, confirmationAction, destructiveAction.
• Toolbar groups items by placement and keeps the placement order stable.
• Toolbar is commonly used at the bottom of screens.
• Toolbar provides consistent spacing and alignment.

Best Practices

1. Placement: Use appropriate placement for each action
2. Consistency: Maintain consistent toolbar patterns
3. Destructive actions: Use destructiveAction placement for dangerous actions
4. Accessibility: Ensure toolbar items are accessible
5. Mobile: Consider mobile interaction patterns when designing toolbars