DialogOverlay

Full-viewport scrim rendered behind an open `Dialog` to block background interaction.

Full-viewport scrim rendered behind an open <Dialog> to block background interaction.

import { DialogOverlay } from "@tetherto/mdk-react-devkit";

DialogOverlay exposes no documented props.

Usage

A modal dialog built on Radix UI @radix-ui/react-dialog. Provides composable primitives plus a high-level DialogContent that handles the overlay, portal, title, description, and optional close button in one component.

Exports

Name	Description
`Dialog`	Root compound component (`Radix Root`)
`DialogTrigger`	Element that opens the dialog
`DialogPortal`	Renders dialog into a portal
`DialogOverlay`	Dark backdrop
`DialogContent`	Panel with built-in header, title, description, close button, and portal/overlay handling
`DialogHeader`	Header container with optional close button
`DialogTitle`	Accessible dialog title
`DialogDescription`	Accessible description
`DialogFooter`	Footer container
`DialogClose`	Raw Radix close primitive

`DialogContent` Props

Prop	Type	Required	Default	Description
`title`	`string`	no	—	Renders `DialogTitle` (and optional `DialogDescription`) inside the header
`description`	`string`	no	—	Renders `DialogDescription` below the title
`closable`	`boolean`	no	—	Shows an ✕ close button in the header
`onClose`	`VoidFunction`	no	—	Fired when the ✕ button is clicked
`bare`	`boolean`	no	`false`	Applies `mdk-dialog__header--bare` to the header
`closeOnClickOutside`	`boolean`	no	`true`	Whether clicking the overlay closes the dialog
`closeOnEscape`	`boolean`	no	`true`	Whether pressing Escape closes the dialog
`className`	`string`	no	—	Additional class for the content panel

`DialogHeader` Props

Prop	Type	Required	Default	Description
`closable`	`boolean`	no	—	Renders a close button
`onClose`	`VoidFunction`	no	—	Fired when the close button is clicked
`bare`	`boolean`	no	`false`	Applies bare header style

Notes

DialogContent omits aria-describedby automatically when no description is provided.
Use DialogTrigger for uncontrolled open state; use the open / onOpenChange props on Dialog for controlled usage.

Example

/** * Runnable example for Dialog. */import { useState } from 'react'import {  Button,  Dialog,  DialogContent,  DialogFooter,  DialogTrigger,} from '@tetherto/mdk-react-devkit'export const DialogExample = () => {  const [open, setOpen] = useState(false)  return (    <div className="mdk-example-row">      <Dialog>        <DialogTrigger asChild>          <Button variant="secondary">Open Dialog</Button>        </DialogTrigger>        <DialogContent          title="Device Settings"          description="Adjust configuration for this miner."          closable        >          <p>Dialog body content goes here. Add form fields, tables, or any content.</p>          <DialogFooter>            <Button variant="secondary">Cancel</Button>            <Button variant="primary">Save Changes</Button>          </DialogFooter>        </DialogContent>      </Dialog>      <Dialog open={open} onOpenChange={setOpen}>        <DialogTrigger asChild>          <Button variant="primary">Controlled Dialog</Button>        </DialogTrigger>        <DialogContent          title="Confirm Action"          closable          onClose={() => setOpen(false)}          closeOnClickOutside={false}        >          <p>This dialog cannot be dismissed by clicking outside.</p>          <DialogFooter>            <Button variant="secondary" onClick={() => setOpen(false)}>              Close            </Button>          </DialogFooter>        </DialogContent>      </Dialog>    </div>  )}