Dialog

Modal with backdrop, title, and footer.

Installation

npx @noarka/cli add dialog

Usage

tsx

import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Input, Label } from "@noarka/ui";

tsx

<Dialog>  <DialogTrigger render={<Button>Edit profile</Button>} />  <DialogContent>    <DialogHeader>      <DialogTitle>Edit profile</DialogTitle>      <DialogDescription>Changes are saved automatically.</DialogDescription>    </DialogHeader>    <div className="space-y-1.5">      <Label htmlFor="demo-name">Name</Label>      <Input id="demo-name" placeholder="Ada Lovelace" />    </div>    <DialogFooter footer>      <Button>Save</Button>    </DialogFooter>  </DialogContent></Dialog>

Examples

Nested dialog

Opening the inner dialog hides the outer one. Closing it brings the outer back.

Scrollable content

Constrain long bodies with a max height so the dialog itself never overflows.

API reference

Dialog

Prop	Type	Default
`open` Controlled open state. Use with onOpenChange.	`boolean`	`-`
`defaultOpen` Initially open when uncontrolled.	`boolean`	`false`
`onOpenChange` Called when the dialog opens or closes.	`(open: boolean) => void`	`-`
`onOpenChangeComplete` Called after open or close animations finish.	`(open: boolean) => void`	`-`
`modal` Limit interaction to the dialog. Trap-focus keeps outside interaction enabled.	`boolean \| 'trap-focus'`	`true`
`disablePointerDismissal` Keep the dialog open on outside clicks.	`boolean`	`false`

DialogContent

Prop	Type	Default
`showCloseButton` Show the corner X close button.	`boolean`	`true`
`render` Polymorphic render prop. Use to render a custom element instead of the default popup.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default content styles.	`string`	`-`

DialogTrigger

Prop	Type	Default
`render` Render a custom trigger element, e.g. render={<Button>Open</Button>}.	`ReactElement \| ((props) => ReactNode)`	`-`
`disabled` Disable the trigger.	`boolean`	`false`

DialogClose

Prop	Type	Default
`render` Render a custom close control. Must live inside the dialog.	`ReactElement \| ((props) => ReactNode)`	`-`

DialogFooter

Prop	Type	Default
`footer` Show the muted footer band with a top border. Without it the footer is plain.	`boolean`	`false`
`showCloseButton` Render an outline Close button beside your actions.	`boolean`	`false`
`className` Additional classes. Always renders the muted band with a top border.	`string`	`-`

DialogHeader

Prop	Type	Default
`className` Additional classes. Pairs with DialogTitle and DialogDescription.	`string`	`-`

DialogTitle

Prop	Type	Default
`className` Additional classes merged with the title styles.	`string`	`-`

DialogDescription

Prop	Type	Default
`className` Additional classes merged with the muted description styles.	`string`	`-`