# Modal

A centered dialog that blocks the main content. Use for critical "Stop and Think" actions, confirmations, or complex data entry that must be completed or cancelled before moving on.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.modal.content"
  source="components/dist/registries/dskit.json#modal"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"modal"} activeTab={"content"} />

## Content guidelines

Modals interrupt the current flow to require the user's attention for a confirmation, input, or critical action. Use them sparingly - overuse degrades their impact.

### When to use

- To confirm destructive or irreversible actions. For full confirmation dialog patterns, see [confirmation](/components/feedback/empty-state/confirmation/).
- To collect a small amount of input before completing an action.
- Do not use modals for purely informational content - use inline messages or tooltips instead.

### Style

- Modal title should match the label of the button or link that triggered it.
- Keep body copy short and actionable. One to two sentences.
- Use a primary and secondary button pair. Align with the [button terminology guidelines](/components/action/button/).
- Do not nest modals.

### Do / Don't

<DoDont pairs={[{ do: "Title: Delete dataset", dont: "Title: OK" }, { do: "This will permanently delete the dataset and cannot be undone.", dont: "Are you sure you want to do this?" }, { do: "Primary CTA: Delete / Secondary CTA: Cancel", dont: "Primary CTA: Yes / Secondary CTA: No" }]} />