Dialog

A modal dialog that interrupts the user with important content and expects a response. Replaces the legacy Modal component with Radix UI primitives for enhanced accessibility.

Installation
# Install @opencosmos/ui to use Dialog
pnpm add @opencosmos/ui
Preview
Loading preview...
Customize
— Controls the open state of the dialog
Usage
Import
import { Dialog } from '@opencosmos/ui';
Example
<Dialog>
  Content
</Dialog>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
openbooleanfalseControls the open state of the dialog

Accessibility

  • Built on Radix UI Dialog primitive with full ARIA support
  • Focus automatically trapped within dialog when open
  • Escape key closes the dialog
  • Click outside closes the dialog
  • Prevents scrolling of background content when open
  • Properly announces to screen readers with role="dialog"

Code Examples

Basic Usage

Simple dialog with trigger button

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@opencosmos/ui';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>
        Dialog description goes here.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Confirmation Dialog

Confirmation dialog with footer actions

import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Button } from '@opencosmos/ui';

<Dialog>
  <DialogTrigger asChild>
    <Button variant="destructive">Delete Account</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your
        account and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button variant="destructive">Delete Account</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>