Dialog

Updated October 24, 2026

Dialog is a native modal drawn as a 1984 Macintosh window: a pinstriped title bar with a close box, over your content and a row of rounded push buttons, the default one ringed. Focus stays inside while it's open, and Escape, the close box or a click outside closes it. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

"use client"

import { useState } from "react"

import "@/components/dithercharts/controls.css"
import { Button } from "@/components/dithercharts/button"
import { Dialog, DialogButton } from "@/components/dithercharts/dialog"

export function AboutDialog() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button variant="outline" aria-haspopup="dialog" onClick={() => setOpen(true)}>
        About this chart
      </Button>
      <Dialog
        title="About This Chart"
        open={open}
        onOpenChange={setOpen}
        actions={
          <>
            <DialogButton onClick={() => setOpen(false)}>Cancel</DialogButton>
            <DialogButton default onClick={() => setOpen(false)}>
              OK
            </DialogButton>
          </>
        }
      >
        <p>Revenue, Jan to Dec, in a Bayer 4x4 dither.</p>
        <p>12 points · 2 series · 1-bit ink</p>
      </Dialog>
    </>
  )
}

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add dialog

Props

It renders a native element, so every other attribute that element takes passes through.

Dialog props
Prop	Type	Default	Description
titlerequired	Type ReactNode	Default –	The window's title, in the pinstriped bar; also its accessible name.
openrequired	Type boolean	Default –	Whether the window is open. It opens modal: focus stays inside, and goes back where it was on close.
onOpenChangerequired	Type (open: boolean) => void	Default –	Called with false on Escape, the close box or a click outside.
childrenrequired	Type ReactNode	Default –	The window's body, which scrolls when it's taller than the screen.
actions	Type ReactNode	Default –	The button row under the body, e.g. a Cancel and a default OK `DialogButton`.
width	Type number \| string	Default `296`	The window's width, in px or any CSS length, never wider than the screen less 32px.
className	Type string	Default –