Components · Overlays
Dialog
Modal dialog built on Radix UI. Fully accessible with focus trapping and ARIA roles.
import { Dialog } from '@nexub/react';Usage
Confirming a destructive or irreversible action
Collecting a small form without leaving the current page
Displaying critical information that requires acknowledgement
Previewing content before taking an action
Long multi-step flows — use a Drawer or a dedicated page instead
Quick contextual info — use a Tooltip or Popover
Non-blocking side panels — use Sheet or Drawer
Stacking multiple dialogs — always limit to one at a time
Examples
Default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled open state. |
| onOpenChange | (open: boolean) => void | — | Callback when open state changes. |
| defaultOpen | boolean | false | Uncontrolled initial open state. |
| surface | 'solid' | 'glass' | 'solid' | Glass material on Dialog.Content — see Foundations → Materials. |
On iOS & Android: Dialog
import { Dialog } from '@nexub/react-native';
<Dialog
open={open}
onOpenChange={setOpen}
title="Remove card?"
actions={
<>
<Button variant="text" onPress={() => setOpen(false)}>Cancel</Button>
<Button tone="danger" onPress={remove}>Remove</Button>
</>
}
/>Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Use | Forms and long content. | Short confirmations only: put forms in a BottomSheet or a screen. |
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. |