Dialog

The Dialog component provides you with modals and overlays for your application.

Live Examples

Storybook: components-dialog--default

Storybook: components-dialog--with-actions

Storybook: components-dialog--form-dialog

Code Examples

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@nostromo/ui-core'
 
export default function DialogExample() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure?</DialogTitle>
        </DialogHeader>
        <p>This action cannot be undone.</p>
      </DialogContent>
    </Dialog>
  )
}

With Form

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Button, Input, Label } from '@nostromo/ui-core'
 
export default function DialogWithForm() {
  return (
    <Dialog>
      <DialogTrigger>Open Form</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create User</DialogTitle>
        </DialogHeader>
        <form className="space-y-4">
          <div>
            <Label htmlFor="name">Name</Label>
            <Input id="name" placeholder="Your name" />
          </div>
          <div>
            <Label htmlFor="email">Email</Label>
            <Input id="email" type="email" placeholder="your@email.com" />
          </div>
          <Button type="submit">Create</Button>
        </form>
      </DialogContent>
    </Dialog>
  )
}

Accessibility

Keyboard Navigation

Tab: Moves focus within the dialog
Shift+Tab: Moves focus backwards within the dialog
Escape: Closes the dialog
Enter: Activates focused buttons or form elements

ARIA Attributes

role="dialog": Identifies the element as a dialog
aria-modal="true": Indicates the dialog is modal
aria-labelledby: References the dialog title
aria-describedby: References additional description text

Focus Management

Focus trap: Prevents focus from escaping the dialog
Initial focus: Focuses the first interactive element
Focus restoration: Returns focus to the trigger element when closed
Focus indicators: Clear visual focus states

Screen Reader Support

Live regions: Announces dialog state changes
Title announcement: Dialog title is announced when opened
State changes: Open/close states are announced

Examples

// Accessible dialog with proper labeling
<Dialog>
  <DialogTrigger aria-label="Open settings dialog">
    Settings
  </DialogTrigger>
  <DialogContent aria-labelledby="dialog-title" aria-describedby="dialog-description">
    <DialogHeader>
      <DialogTitle id="dialog-title">Settings</DialogTitle>
      <p id="dialog-description" className="sr-only">
        Configure your application settings
      </p>
    </DialogHeader>
    {/* Dialog content */}
  </DialogContent>
</Dialog>

Props

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether dialog is open
`onOpenChange`	`function`	-	Open change handler

Accordion ErrorBoundary