Dialog

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

Import

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger } from '@nostromo/ui-core'
// or
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger } from '@nostromo/ui-core/dialog'

Usage

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@nostromo/ui-core'
 
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>
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Button } from '@nostromo/ui-core' export default function DialogExample() { return ( <Dialog> <DialogTrigger asChild> <Button>Open Dialog</Button> </DialogTrigger> <DialogContent> <DialogHeader>...

With Form

Live Example

☀️

Copy

Storybook →

View Code

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Button, Input, Label } from '@nostromo/ui-core' export default function DialogWithForm() { return ( <Dialog> <DialogTrigger asChild> <Button>Open Form</Button> </DialogTrigger> <DialogContent> <DialogHeader>...

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

Prop	Type	Default	Required	Description
`open`	`boolean`	`false`	No	Whether the dialog is open
`onOpenChange`	`(open: boolean) => void`	`undefined`	No	Callback when open state changes
`backdropVariant`	`"default" \| "subtle" \| "strong" \| "colored"`	`"default"`	No	Backdrop visual variant
`children`	`React.ReactNode`	`undefined`	No	Dialog content

DialogContent

Prop	Type	Default	Required	Description
`variant`	`"default" \| "elevated" \| "outlined" \| "filled" \| "destructive"`	`"default"`	No	Visual variant of the dialog
`size`	`"sm" \| "default" \| "lg" \| "xl" \| "full"`	`"default"`	No	Size of the dialog
`animation`	`"default" \| "slide" \| "scale" \| "none"`	`"default"`	No	Animation variant
`onClose`	`() => void`	`undefined`	No	Callback when dialog is closed
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Dialog content

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

Charts ErrorBoundary