Getting Started
Foundations
Components
Search for a command to run...
Dialogs (also called modals) are overlay windows that require user interaction before returning to the main application. They're used for critical information, confirmations, or focused tasks that need undivided attention. The dialog blocks interaction with the underlying page content and typically includes a backdrop overlay.
Built on top of Radix UI's Dialog primitive with full keyboard navigation, focus management, and accessibility support including proper ARIA attributes and focus trapping.
"use client"
import { Button } from "@strongtie/design-system/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@strongtie/design-system/dialog"
export function DialogDefault() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open Dialog</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>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Continue</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
npm install @strongtie/design-system
import { Dialog } from "@strongtie/design-system/dialog"This module exports the following components:
DialogDialogPortalDialogOverlayDialogCloseDialogTriggerDialogContentDialogHeaderDialogFooterDialogTitleDialogDescriptionAll components extend Radix UI primitives. See the Radix UI documentation for all available props.
"use client"
import { Button } from "@strongtie/design-system/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@strongtie/design-system/dialog"
export function DialogDefault() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open Dialog</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>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Continue</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
"use client"
import { Button } from "@strongtie/design-system/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@strongtie/design-system/dialog"
export function DialogAlert() {
return (
<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>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button variant="destructive">Delete Account</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
"use client"
import { Button } from "@strongtie/design-system/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@strongtie/design-system/dialog"
export function DialogLongContent() {
return (
<Dialog>
<DialogTrigger asChild>
<Button>Terms of Service</Button>
</DialogTrigger>
<DialogContent className="max-h-[600px]">
<DialogHeader>
<DialogTitle>Terms of Service</DialogTitle>
</DialogHeader>
<div className="max-h-[300px] overflow-auto">
{Array.from({ length: 10 }).map((_, i) => (
<p key={i} className="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
))}
</div>
<DialogFooter>
<DialogClose asChild>
<Button>I Accept</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
"use client"
import { Button } from "@strongtie/design-system/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@strongtie/design-system/dialog"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@strongtie/design-system/dropdown-menu"
import { Label } from "@strongtie/design-system/label"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@strongtie/design-system/popover"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@strongtie/design-system/select"
export function DialogWithStacking() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Test Stacking Layers</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[525px]">
<DialogHeader>
<DialogTitle>Z-Index Stacking Test</DialogTitle>
<DialogDescription>
This dialog contains various interactive elements to test proper
z-index stacking behavior. Try opening the select, dropdown menu,
and popover to ensure they appear above the dialog overlay.
</DialogDescription>
</DialogHeader>
<div className="grid gap-6 py-4">
<div className="space-y-2">
<Label>Select Component</Label>
<Select>
<SelectTrigger className="w-full">
<SelectValue placeholder="Choose a framework" />
</SelectTrigger>
<SelectContent>
<SelectItem value="react">React</SelectItem>
<SelectItem value="vue">Vue</SelectItem>
<SelectItem value="angular">Angular</SelectItem>
<SelectItem value="svelte">Svelte</SelectItem>
<SelectItem value="solid">Solid</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>Dropdown Menu</Label>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-full">
Open Actions Menu
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Duplicate</DropdownMenuItem>
<DropdownMenuItem>Archive</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-destructive">
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="space-y-2">
<Label>Popover Component</Label>
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" className="w-full">
Open Popover
</Button>
</PopoverTrigger>
<PopoverContent className="w-80">
<div className="grid gap-4">
<div className="space-y-2">
<h4 className="leading-none font-medium">
Nested Popover Content
</h4>
<p className="text-muted-foreground text-sm">
This popover should appear above the dialog backdrop and
overlay properly.
</p>
</div>
<div className="space-y-2">
<Label className="text-sm font-medium">Nested Select</Label>
<Select>
<SelectTrigger>
<SelectValue placeholder="Select a color" />
</SelectTrigger>
<SelectContent>
<SelectItem value="red">Red</SelectItem>
<SelectItem value="blue">Blue</SelectItem>
<SelectItem value="green">Green</SelectItem>
<SelectItem value="yellow">Yellow</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</PopoverContent>
</Popover>
</div>
<div className="space-y-2">
<Label>Another Select</Label>
<Select>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select a priority" />
</SelectTrigger>
<SelectContent>
<SelectItem value="low">Low</SelectItem>
<SelectItem value="medium">Medium</SelectItem>
<SelectItem value="high">High</SelectItem>
<SelectItem value="critical">Critical</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<DialogFooter>
<Dialog>
<DialogTrigger>Open Stacked Dialog</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Stacked Dialog</DialogTitle>
<DialogDescription>This is a stacked dialog.</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Save Changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button>Save Changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
Other CSS classes used by this component:
dialog-closedialog-contentdialog-descriptiondialog-footerdialog-headerdialog-overlaydialog-titleThis component inherits accessibility features from Radix UI, including: