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

The States Block is a full-screen layout used to communicate a process state: loading, success, or error. It centers a status icon, a title, and supporting text — replacing the standard screen layout while the system processes or delivers a result.

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

<div class="dh-stage"><span class="dh-pz-states"><figure style="background:#e4fbf0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#189f60" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></figure><strong>Identity verified</strong><p>You’re all set. You can now continue with your application.</p><button class="dh-pz-btn dh-pz-btn-primary" type="button">Continue</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-states" style="width:210px;padding:24px 16px"><figure style="background:#e4fbf0;width:44px;height:44px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#189f60" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></figure><strong style="font-size:15px">Success</strong><p style="margin:0">Verification complete.</p></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#189f6014;color:#189f60">Success</span><code>.states--success</code><p>Positive outcome with a single continue action.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-states" style="width:210px;padding:24px 16px"><figure style="background:#fff0f0;width:44px;height:44px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#e71111" stroke-width="2.5" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg></figure><strong style="font-size:15px">Failed</strong><p style="margin:0">We couldn’t verify you.</p></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#e7111114;color:#e71111">Error</span><code>.states--error</code><p>Explains the failure and offers a retry.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-states" style="width:210px;padding:24px 16px"><figure style="background:#fff7eb;width:44px;height:44px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ff9900" stroke-width="2.5" stroke-linecap="round"><path d="M12 9v4"/><path d="M12 17h.01"/></svg></figure><strong style="font-size:15px">Attention</strong><p style="margin:0">Something needs review.</p></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#ff990014;color:#ff9900">Warning</span><code>.states--warning</code><p>A recoverable issue that needs user attention.</p></div></div></div>

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

```dh-comp-tokens
--states-icon-success | Success icon background | Component
--states-icon-error | Error icon background | Component
--states-icon-loading | Spinner arc color | Component
--states-title | Title text color | Component
--states-sub | Supporting text color | Component
--states-gap | Vertical gap between items | Component
```

> 📘 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.