Dialog

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

Live Examples

Import

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogTrigger,
} from "@jarllyng/nostromo";
// or
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogTrigger,
} from "@jarllyng/nostromo/dialog";

Usage

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@jarllyng/nostromo";
 
export default function Example() {
  const [open, setOpen] = React.useState(false);
 
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
        </DialogHeader>
        <p>Dialog content goes here</p>
      </DialogContent>
    </Dialog>
  );
}

With Form

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>

Best Practices

Do ✅

• Always provide a DialogTitle for accessibility
• Use onOpenChange to control dialog state
• Provide aria-label for icon-only triggers
• Use backdropVariant to match your design system
• Handle form submissions properly in dialogs

Don’t ❌

• Don’t nest dialogs (use nested content instead)
• Don’t forget to handle focus management
• Don’t use dialogs for non-modal content
• Don’t disable backdrop clicks without providing alternative close method

Props

Dialog

DialogContent

DialogHeader, DialogTitle, DialogDescription

These components extend standard HTML attributes (div, h2, p respectively) and accept:

• className?: string - Additional CSS classes
• children?: React.ReactNode - Component content
• All standard HTML attributes for their respective elements