# Confirmation

A placeholder shown when success. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.

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.confirmation.content"
  source="components/dist/registries/dskit.json#confirmation"
  schema={1}
  updated="2026-05-14"
/>

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

## Content guidelines

Confirmation dialogs interrupt the user before an irreversible or destructive action to verify intent. Use them only for actions that cannot be undone.

### When to use

Before irreversible or destructive actions (delete, remove, reset).

### Style

- Title: name the action, not the outcome.

<DoDont pairs={[{ do: "Delete connection", dont: "This is permanent" }]} />

- Body: one sentence stating what will happen and whether it can be undone.
- Primary CTA: matches the title verb. For example, **Delete**.
- Secondary CTA: **Cancel**.

### Do / Don't

<DoDont pairs={[{ do: "Delete connection / This will remove the connection and cannot be undone. / Delete | Cancel", dont: "Warning! Are you sure? This action is permanent. / Yes | No" }]} />