overlay

Dialog

Accessible modal dialog with animated overlay, built on Radix UI. Focus trapped, scroll locked, and keyboard-navigable.

Import

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from '@stella-ds/react'

DialogDialogTriggerDialogContentDialogHeaderDialogFooterDialogTitleDialogDescriptionDialogClose

Props

Prop	Type	Default	Description
showClose (DialogContent)	boolean	true	Show default × close button

Preview

Examples

Basic

<Dialog>
  <DialogTrigger asChild><Button>Open Dialog</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>This action cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

← Checkbox

All Components

Footer →