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

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

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/modal/preview.png" alt="" />

## Overview

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.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Trigger","description":"the element that opens the overlay; retains focus return on close"},{"name":"Surface","description":"the overlay panel itself — modal dialog, drawer, popover, tooltip"},{"name":"Scrim (optional)","description":"dimmed backdrop used for modals + drawers; absent for popovers/tooltips"},{"name":"Header (optional)","description":"title + close affordance for dismissible overlays"},{"name":"Body","description":"the overlay's primary content"},{"name":"Footer (optional)","description":"action affordances — confirm/cancel/close"},{"name":"Arrow or pointer (optional)","description":"anchors popovers/tooltips to their trigger"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Size & Type","values":["700px setting","1200px","900px create","900px edit","700px create","450px warning","450px confirm"]},{"axis":"Dev status","values":["🟢 Ready"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"layered-overlays-modals","note":"modals fade + scale; scrim cross-fades"},"pattern":{"slug":"layered-overlays-modals","name":"Layered Overlays — Modals","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Modal scales 95%→100% while background scrim fades in. The slow duration communicates that the user has entered a new, temporary top-level context."},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Modal scales 100%→95% and fades 100%→0%. Scrim fades 100%→0%, synchronized. Slower on open to help users track context; dismisses quickly once the decision is made."}]}},{"ref":{"ref":"drawer-open-close","note":"drawer-side-panel slides on axis with easing per the drawer pattern"},"pattern":{"slug":"drawer-open-close","name":"Drawer (open/close)","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Slides in from the right"},{"Phase":"Close","Duration":"duration-base","Easing":"ease-exit","Behavior":"Slides out to the right"}]}},{"ref":{"ref":"anchor-motion","note":"popover/tooltip anchor open at the trigger with origin transform"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14175-14426)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/modal)