Interaction

Dialog

A modal overlay for confirmations, details and focused forms.

Component

14

Import

import { Dialog, DialogContent, DialogTrigger } from "@swirski/ui";

Composition

Dialog
|-- DialogTrigger
`-- DialogContent
    |-- DialogHeader
    |   |-- DialogTitle
    |   `-- DialogDescription
    |-- DialogFooter
    `-- DialogClose

Playground

3 controls

Controls

title

description

defaultOpen

Usage

<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Publish changes</DialogTitle>
      <DialogDescription>
        Review the release notes before this goes live.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose>Cancel</DialogClose>
      <DialogClose className="bg-[#0057FF] text-white">Publish</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Props

34 generated

Prop	Type	Default	Notes
`DialogClose.asChild`	`boolean`	`false`	Generated from DialogCloseProps.
`DialogClose.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DialogCloseProps.
`DialogClose.tone`	`'default'`	`"default"`	Generated from DialogCloseProps.
`DialogClose.variant`	`'default' \| 'compact'`	`"default"`	Generated from DialogCloseProps.
`DialogContent.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DialogContentProps.
`DialogContent.tone`	`'default'`	`"default"`	Generated from DialogContentProps.
`DialogContent.variant`	`'default' \| 'compact'`	`"default"`	Generated from DialogContentProps.
`Dialog.children`Required	`ReactNode`	`-`	Generated from DialogProps.
`Dialog.defaultOpen`	`boolean`	`false`	Initial uncontrolled open state.
`Dialog.onOpenChange`	`((open: boolean) => void)`	`-`	Called when the dialog opens or closes.
`Dialog.open`	`boolean`	`-`	Controlled open state.
`Dialog.size`	`'sm' \| 'md' \| 'lg'`	`-`	Generated from DialogProps.
`Dialog.tone`	`'default'`	`-`	Generated from DialogProps.
`Dialog.variant`	`'default' \| 'compact'`	`-`	Generated from DialogProps.
`DialogHeader.asChild`	`boolean`	`false`	Generated from DialogHeaderProps.
`DialogHeader.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DialogHeaderProps.
`DialogHeader.tone`	`'default'`	`"default"`	Generated from DialogHeaderProps.
`DialogHeader.variant`	`'default' \| 'compact'`	`"default"`	Generated from DialogHeaderProps.
`DialogTitle.asChild`	`boolean`	`false`	Generated from DialogTitleProps.
`DialogTitle.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DialogTitleProps.
`DialogTitle.tone`	`'default'`	`"default"`	Generated from DialogTitleProps.
`DialogTitle.variant`	`'default' \| 'compact'`	`"default"`	Generated from DialogTitleProps.
`DialogDescription.asChild`	`boolean`	`false`	Generated from DialogDescriptionProps.
`DialogDescription.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DialogDescriptionProps.
`DialogDescription.tone`	`'default'`	`"default"`	Generated from DialogDescriptionProps.
`DialogDescription.variant`	`'default' \| 'compact'`	`"default"`	Generated from DialogDescriptionProps.
`DialogFooter.asChild`	`boolean`	`false`	Generated from DialogFooterProps.
`DialogFooter.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DialogFooterProps.
`DialogFooter.tone`	`'default'`	`"default"`	Generated from DialogFooterProps.
`DialogFooter.variant`	`'default' \| 'compact'`	`"default"`	Generated from DialogFooterProps.
`DialogTrigger.asChild`	`boolean`	`false`	Generated from DialogTriggerProps.
`DialogTrigger.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from DialogTriggerProps.
`DialogTrigger.tone`	`'default'`	`"default"`	Generated from DialogTriggerProps.
`DialogTrigger.variant`	`'default' \| 'compact'`	`"default"`	Generated from DialogTriggerProps.
`className`	`string`	`-`	Available on trigger, content and layout slots.

Previous: SwirskiProvider Next: Popover