Dialog

A modal dialog that overlays the page content and requires user interaction.

Usage


import { Dialog } from "@rhinolabs/ui"
 
export default function DialogDemo() {
  return (
    <Dialog>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Header>
          <Dialog.Title>Are you sure?</Dialog.Title>
          <Dialog.Description>
            This action cannot be undone.
          </Dialog.Description>
        </Dialog.Header>
        <Dialog.Footer>
          <Button variant="outline">Cancel</Button>
          <Button>Continue</Button>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog>
  )
}

Examples

Basic Dialog

A simple confirmation dialog.


<Dialog>
  <Dialog.Trigger asChild>
    <Button variant="outline">Edit Profile</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Edit profile</Dialog.Title>
      <Dialog.Description>
        Make changes to your profile here. Click save when you're done.
      </Dialog.Description>
    </Dialog.Header>
    <div className="grid gap-4 py-4">
      <div className="grid grid-cols-4 items-center gap-4">
        <label htmlFor="name">Name</label>
        <input id="name" className="col-span-3" />
      </div>
      <div className="grid grid-cols-4 items-center gap-4">
        <label htmlFor="username">Username</label>
        <input id="username" className="col-span-3" />
      </div>
    </div>
    <Dialog.Footer>
      <Button type="submit">Save changes</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog>

Alert Dialog

A dialog for important notifications.


<Dialog>
  <Dialog.Trigger asChild>
    <Button variant="destructive">Delete Account</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Delete Account</Dialog.Title>
      <Dialog.Description>
        Are you sure you want to delete your account? This action cannot be undone.
      </Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <Button variant="outline">Cancel</Button>
      <Button variant="destructive">Delete</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog>

Props

Dialog

The root component that accepts all standard div attributes.

DialogContent

Prop	Type	Description
`onOpenAutoFocus`	`(event: Event) => void`	Focus event handler when dialog opens
`onCloseAutoFocus`	`(event: Event) => void`	Focus event handler when dialog closes
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	Escape key handler

DialogTrigger

Accepts all button HTML attributes.

Design Considerations

Keep content focused and concise
Use clear action buttons
Maintain visual hierarchy
Consider mobile viewports
Provide clear feedback

Accessibility

Manages focus automatically
Supports keyboard navigation
Traps focus within dialog
Provides ARIA labels
Handles escape key