---
title: "Modal"
url: "https://developer.incode.com/design-and-ux/modal/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# Modal

Modals interrupt the current flow to deliver critical information or request a decision. Prizma modals always include a title, a supporting message, and a primary action. They are centered on screen and overlay a dimmed background.

<div class="dh-rule"><span>Anatomy</span><i></i></div>

<div class="dh-stage"><span class="dh-pz-modal"><strong>Verification failed</strong><p>We couldn’t verify your identity. Please try again with better lighting.</p><button class="dh-pz-btn dh-pz-btn-primary" type="button">Try again</button></span></div>

<div class="dh-rule"><span>Variants</span><i></i></div>

<div class="dh-var-grid"><div class="dh-var" style="background:#189f6008"><div class="dh-var-stage"><span class="dh-pz-modal" style="width:220px"><strong>Identity verified</strong><p>You can continue with your process.</p><button class="dh-pz-btn dh-pz-btn-primary" type="button">Continue</button></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#189f6014;color:#189f60">Confirmation</span><code>.modal--confirm</code><p>A single positive action to move forward.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-modal" style="width:220px"><strong>Verification failed</strong><p>We couldn’t verify your identity.</p><button class="dh-pz-btn dh-pz-btn-secondary" type="button">Try again</button></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#e7111114;color:#e71111">Recovery</span><code>.modal--error</code><p>Explains what went wrong and offers a retry path.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-modal" style="width:220px"><strong>Camera access needed</strong><p>Allow access to continue with face verification.</p><button class="dh-pz-btn dh-pz-btn-primary" type="button">Allow access</button></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Permission</span><code>.modal--permission</code><p>Requests a decision before the flow can continue.</p></div></div></div>

<div class="dh-rule"><span>Tokens</span><i></i></div>

```dh-comp-tokens
--modal-surface | Modal card background | Component
--modal-border | Modal card border | Component
--modal-title | Title text color | Component
--modal-sub | Supporting text color | Component
--modal-overlay | Background overlay color | Component
--modal-close-icon | Close icon color | Component
--radius-modal | Modal corner radius | Semantic
```

> 📘 Component tokens
>
> The color tokens for this component live in [Color → Tokens](/design-and-ux/color/), and its spacing, radius, and type map to the shared foundation scales.