Component

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. Dismissible via close button, outside click or Escape — unlike Alert Dialog.

DialogContentshowCloseButton: boolean (default true)

DialogHeader / DialogFooterlayout containers

DialogTitle / DialogDescriptionheading + supporting text

DialogClosedismiss — render as any element

Playground

Show close button— showCloseButton

Default — form

edit profile

Custom close button

share link — custom trigger for DialogClose

No close button

showCloseButton={false} — footer action only

Sticky footer — scrollable content

content scrolls, footer stays visible

RTL support

Arabic

Tokens used

8 semantic tokens consumed by this component.

--popoverPopover

bg-popover

--popover-foregroundPopover Foreground

text-popover-foreground

--mutedMuted

bg-mutedtext-mutedborder-muted

--foregroundForeground

text-foreground

--muted-foregroundMuted Foreground

text-muted-foreground

--borderBorder

border-borderborder

--inputInput

bg-inputborder-input

--ringRing

ring-ringring