/ux
Components/Overlays/Dialog

Dialog

Overlays

Modal dialog with backdrop, focus trap, and Escape to dismiss.

Radix Dialog wrapper. Compose from DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription. Sizes sm–xl set max-width.

Usage

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "nosible-ux"
import { Button } from "nosible-ux"

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button intent="outline">Open dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Confirm export</DialogTitle>
          <DialogDescription>This will export 1,240 signals as CSV.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button intent="ghost">Cancel</Button>
          <Button intent="primary">Export</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Examples

Destructive confirmation

Large content dialog

Accessibility

Radix Dialog handles focus trap, Escape to close, role="dialog", aria-modal, and return focus to trigger on close.

Props

Name TypeDefaultDescription
asChild
boolean | undefined—
forceMount
true | undefined—Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
onCloseAutoFocus
((event: Event) => void) | undefined—Event handler called when auto-focusing on close. Can be prevented.
onEscapeKeyDown
((event: KeyboardEvent) => void) | undefined—Event handler called when the escape key is down. Can be prevented.
onFocusOutside
((event: FocusOutsideEvent) => void) | undefined—Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
onInteractOutside
((event: PointerDownOutsideEvent | FocusOutsideEvent) => void) | undefined—Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
onOpenAutoFocus
((event: Event) => void) | undefined—Event handler called when auto-focusing on open. Can be prevented.
onPointerDownOutside
((event: PointerDownOutsideEvent) => void) | undefined—Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
size
"sm" | "md" | "lg" | "xl" | undefined—Width tier of the dialog panel. Default: `"md"`.
← All ComponentsGetting Started →