Dialog
Modal dialog with CS 1.6 VGUI window chrome.
Dialog
A modal dialog component styled as a CS 1.6 VGUI window — olive-green panel with title bar, close button, and footer action bar. Built on Radix UI Dialog for accessibility.
Interactive Preview
Usage
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogBody,
DialogFooter,
DialogClose,
} from "@/components/ui/cscn/dialog";
import { Button } from "@/components/ui/cscn/button";
<Dialog>
<DialogTrigger asChild>
<Button>Disconnect</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirm Disconnect</DialogTitle>
</DialogHeader>
<DialogBody>
<DialogDescription>
Are you sure you want to disconnect from the server?
</DialogDescription>
</DialogBody>
<DialogFooter>
<DialogClose asChild>
<Button variant="default" size="sm">Cancel</Button>
</DialogClose>
<Button variant="destructive" size="sm">Disconnect</Button>
</DialogFooter>
</DialogContent>
</Dialog>Sub-components
| Component | Description |
|---|---|
Dialog | Root component (Radix) |
DialogTrigger | Trigger element |
DialogContent | Modal panel with VGUI styling |
DialogHeader | Title bar with close button |
DialogTitle | Yellow title text |
DialogDescription | Secondary description text |
DialogBody | Padded content area |
DialogFooter | Button row footer |
DialogClose | Close trigger |