Components
Toolbar
The bottom action bar.
It pads itself by the safe-area inset, so on a device it sits above the home indicator.
WEB APPROXIMATION — on iOS the background is an expo-blur layer over the
content behind it. Storybook has nothing behind it to blur.
<Toolbar
leftView={<ToolbarIcon accessibilityLabel="Attach file" icon={{ name: 'paperclip' }} />}
rightView={<ToolbarCTA accessibilityLabel="Send" icon={{ name: 'paperplane' }} />}
/>Import
import { Toolbar } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
leftView | — | — | Leading slot. Toolbar lays out left/hint/right and nothing else — it does not style what you put in. |
rightView | — | — | Trailing slot, where the primary action belongs. |
iosHint | — | — | Centred hint text on iOS. Android has no equivalent slot and drops it. |
Examples
With Hint
<Toolbar
iosHint="3 requests selected"
leftView={<ToolbarIcon accessibilityLabel="Clear selection" icon={{ name: 'xmark' }} />}
rightView={<ToolbarCTA accessibilityLabel="Confirm selection" icon={{ name: 'checkmark' }} />}
/>Text Actions
<Toolbar
leftView={<Text color="tertiary">Cancel</Text>}
rightView={<Text>Approve all</Text>}
/>