Component

Alert

The dark, two-tier confirmation dialog reserved for decisions that need a deliberate second tap, with a destructive button rendered in red.

The primitive

alert.tsx

const { alert, dismiss, show } = useNativeAlert();

show({
  title: "Delete card?",
  message: "This cannot be undone.",
  buttons: [
    { label: "Cancel", kind: "cancel" },
    { label: "Delete", kind: "destructive" },
  ],
});

<NativeAlert alert={alert} onDismiss={dismiss} />

Example

A destructive confirmation that requires the cancel button to sit first so the thumb's resting position never lands on the irreversible action.

alert-example.tsx

const { alert, dismiss, show } = useNativeAlert();

show({
  title: "Remove Chase Bank?",
  message: "You'll need to re-link this account to send or receive transfers from it again.",
  buttons: [
    { label: "Cancel", kind: "cancel" },
    { label: "Remove", kind: "destructive" },
  ],
});

<NativeAlert alert={alert} onDismiss={dismiss} />

Capabilities

Prop	Type	Description
alertrequired	NativeAlertOptions \| null	—
onDismissrequired	() => void	—