dialog

Accessible modal dialog with focus trap, scroll lock and dismissal.

A headless, accessible modal dialog (WAI-ARIA) built on the Fluixi overlay primitives: portal, focus trap, scroll lock and dismissable layer.

import {
  Dialog, DialogTrigger, DialogPortal, DialogOverlay,
  DialogContent, DialogTitle, DialogDescription, DialogClose,
} from '@fluixi/dialog';

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
      <DialogClose>Close</DialogClose>
    </DialogContent>
  </DialogPortal>
</Dialog>

Controlled (open) or uncontrolled (defaultOpen) with onOpenChange; modal defaults to true.
Focus moves into the dialog on open and is restored on close; body scroll is locked while a modal dialog is open.
Closes on Escape, outside pointer down (excluding the trigger) and DialogClose.
aria-modal, aria-labelledby (title) and aria-describedby (description) are wired automatically; data-state is open/closed.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.

Examples

dialog