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.

Anatomy

Identity verified

You’re all set. You can now continue with your application.

Variants

Success

Verification complete.

Success.states--success

Positive outcome with a single continue action.

Failed

We couldn’t verify you.

Error.states--error

Explains the failure and offers a retry.

Attention

Something needs review.

Warning.states--warning

A recoverable issue that needs user attention.

Tokens

TokenRoleLayer

--states-icon-successSuccess icon backgroundComponent

--states-icon-errorError icon backgroundComponent

--states-icon-loadingSpinner arc colorComponent

--states-titleTitle text colorComponent

--states-subSupporting text colorComponent

--states-gapVertical gap between itemsComponent

Component tokens

The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.