Dialog

A modal window with the Y2K flat window-chrome aesthetic. The title bar carries three default controls — _ (minimize), ▢ (maximize), ✕ (close) — and each can be hidden via prop. The dialog is triggered from a button click, not auto-opened.

Default — three controls

Click the button below to open the dialog. By default the title bar shows [minimize] [maximize] [close].

dialog-default-demo.app

Hiding individual controls

Each of the three window controls can be hidden via boolean props: hideMinimize, hideMaximize, hideClose.

dialog-hide-controls-demo.app

Installation

terminal.sh

npx y2kui@latest add dialog

Usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <button>Open</button>
      </DialogTrigger>
      <DialogContent title="My window">
        <DialogHeader>
          <DialogTitle>My window</DialogTitle>
          <DialogDescription>Description here.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <button>Cancel</button>
          <button>OK</button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Props

`Dialog`

Prop	Type	Default	Description
`open`	boolean	—	Controlled open state.
`defaultOpen`	boolean	—	Initial open state (uncontrolled).
`onOpenChange`	(open: boolean) => void	—	Called when the dialog open state changes.

`DialogContent`

Prop	Type	Default	Description
`title`	ReactNode	—	Title shown in the Y2K title bar.
`hideMinimize`	boolean	`false`	Hide the `_` (minimize) window control.
`hideMaximize`	boolean	`false`	Hide the `▢` (maximize) window control.
`hideClose`	boolean	`false`	Hide the `✕` (close) window control.
`onMinimize`	() => void	—	Fired when the user clicks the minimize control.
`onMaximize`	() => void	—	Fired when the user clicks the maximize control.

On this page