Components · Overlays
Alert Dialog
StableSince v0.0.1
Confirmation dialog that requires an explicit user action before proceeding.
import { AlertDialog } from '@nexub/react';Examples
Default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| AlertDialog.Root | compound | — | Root provider component that manages open state. |
| AlertDialog.Trigger | compound | — | Element that opens the dialog on interaction. |
| AlertDialog.Portal | compound | — | Portals the overlay and content into the document body. |
| AlertDialog.Overlay | compound | — | Dimmed backdrop rendered behind the content. |
| AlertDialog.Content | compound | — | The dialog panel containing title, description, and actions. |
| AlertDialog.Title | compound | — | Accessible title announced to screen readers. |
| AlertDialog.Description | compound | — | Supporting description text for the dialog. |
| AlertDialog.Action | compound | — | Confirms the destructive or affirmative action and closes the dialog. |
| AlertDialog.Cancel | compound | — | Cancels the action and closes the dialog. |
On iOS & Android: Dialog
@nexub/react-nativeAlpha
import { Dialog } from '@nexub/react-native';
<Dialog dismissable={false} open={open} onOpenChange={setOpen} title="Sign out?" actions={<Button onPress={signOut}>Sign out</Button>} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Dismiss | AlertDialog never closes on outside click. | dismissable={false} gives the same. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
Dialog props
| Prop | Type | Default | Description |
|---|---|---|---|
| openrequired | boolean | — | — |
| onOpenChangerequired | (open: boolean) => void | — | — |
| titlerequired | string | — | — |
| description | string | — | — |
| children | React.ReactNode | — | Extra content between the description and the actions. |
| actionsrequired | React.ReactNode | — | 1–2 Buttons; put the confirming action last. |
| dismissable | boolean | true | Tapping the scrim or Android back closes it. |