Components
Alert
Two ways to use this.
Declarative — pass children and they become the trigger, which is what these stories show. Or imperative — render <AlertAnchor ref={alertRef} /> once per screen and call alertRef.current.alert({...}), which is the pattern most screens use.
On iOS this delegates to the platform alert; the dialog you see here is the Material implementation.
<View className="items-start">
<Alert {...args}>
<Button variant="tonal">
<Text>Discard request</Text>
</Button>
</Alert>
</View>Import
import { Alert } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
title | — | "Discard this request?" | The question or outcome. Required — an alert with only a message reads as a system error. |
message | — | "Anything you have entered will be lost." | The consequence, in one line. Optional. |
buttons | — | [] | Up to three. style: "cancel" positions the safe choice per platform convention and style: "destructive" colours the dangerous one — both are honoured by the real iOS alert. |
prompt | — | — | Adds a text input and passes its value to the pressed button's onPress. Presence is the switch; there is no separate mode. |
materialIcon | — | — | Glyph above the title on Android. iOS alerts have no icon slot and ignore it. |
Examples
Single Action
A single acknowledge button — the informational shape.
<View className="items-start">
<Alert {...args}>
<Button>
<Text>Show result</Text>
</Button>
</Alert>
</View>With Icon
materialIcon puts a glyph above the title.
<View className="items-start">
<Alert {...args}>
<Button variant="tonal">
<Text>Delete item</Text>
</Button>
</Alert>
</View>Prompt
With prompt the dialog grows a text input and passes the value to onPress.
<View className="items-start">
<Alert {...args}>
<Button variant="tonal">
<Text>Reject with reason</Text>
</Button>
</Alert>
</View>