Dialog
Modal dialogs, confirmation prompts, and dialog utilities
Modal and dialog components for user interactions.
Prerequisites
- Install the packages
npm install \
@tetherto/mdk-react-devkit \
@tetherto/mdk-react-adapter \
@tetherto/mdk-ui-foundation- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
@tetherto/mdk-react-devkit
Import the public APIs on this page from @tetherto/mdk-react-devkit.
AlertDialogAction
Primary confirmation button inside an <AlertDialog>; clicking dismisses the dialog and runs the action handler
agent-ready
AlertDialogCancel
Secondary dismiss button inside an <AlertDialog>; closes the dialog without invoking the destructive action
agent-ready
AlertDialogContent
Modal content surface for an <AlertDialog> — renders the centered panel above the overlay with focus trap
agent-ready
AlertDialogDescription
Supporting body text inside an <AlertDialog>; conveys the consequences of the action being confirmed
agent-ready
AlertDialogFooter
Right-aligned action row inside an <AlertDialog> — hosts the cancel and confirm buttons
agent-ready
AlertDialogHeader
Top section of an <AlertDialog> that groups the title and description above the action row
agent-ready
AlertDialogOverlay
Full-viewport scrim rendered behind an <AlertDialog> to block interaction with the page
agent-ready
AlertDialogTitle
Prominent title text inside an <AlertDialog> summarising the action that requires confirmation
agent-ready
DialogContent
Centered modal surface for a <Dialog> — renders above the overlay with focus trap and Escape-to-close
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
bare | Optional | boolean | false | Applies mdk-dialog__header--bare to the header |
closable | Optional | boolean | - | Shows an ✕ close button in the header |
closeOnClickOutside | Optional | boolean | true | Whether clicking the overlay closes the dialog |
closeOnEscape | Optional | boolean | true | Whether pressing Escape closes the dialog |
description | Optional | string | - | Renders DialogDescription below the title |
onClose | Optional | VoidFunction | - | Fired when the ✕ button is clicked |
title | Optional | string | - | Renders DialogTitle (and optional DialogDescription) inside the header |
DialogDescription
Supporting body copy inside a <Dialog> rendered below the title
agent-ready
DialogFooter
Action row at the bottom of a <Dialog> — typically primary/secondary buttons
agent-ready
DialogHeader
Top region of a <Dialog> that groups the title and description
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
bare | Optional | boolean | false | Applies mdk-dialog__header--bare to the header |
closable | Optional | boolean | - | Shows an ✕ close button in the header |
onClose | Optional | VoidFunction | - | Fired when the ✕ button is clicked |
DialogOverlay
Full-viewport scrim rendered behind an open <Dialog> to block background interaction
agent-ready
DialogTitle
Prominent title text at the top of a <Dialog> summarising the modal's purpose
agent-ready