Preview Updated 2026-05-10

Status illustration

A set of semantic state illustrations (empty / search / upload / success / 404 / 403 / 500 etc.) wired to design tokens.

Basic usage

10 variants share the same body (window + shadow); each variant adds dedicated accents and color. By default it’s decorative (aria-hidden); pass title to make it accessible (with a <title> element).

empty

upload

success

info

warning

error

not-found

forbidden

server-error

src/App.vue vue

<CfStatusIllustration variant="empty" />
<CfStatusIllustration variant="search" />
<CfStatusIllustration variant="upload" />
<CfStatusIllustration variant="success" />
<CfStatusIllustration variant="not-found" />

src/App.tsx tsx

<CfStatusIllustration variant="empty" />
<CfStatusIllustration variant="search" />
<CfStatusIllustration variant="upload" />
<CfStatusIllustration variant="success" />
<CfStatusIllustration variant="not-found" />

Sizes

size controls the illustration scale. Use sm for inline hints, md by default, lg for full-page Result screens.

size = sm

size = md

size = lg

src/App.vue vue

<CfStatusIllustration size="sm" />
<CfStatusIllustration size="md" />
<CfStatusIllustration size="lg" />

src/App.tsx tsx

<CfStatusIllustration size="sm" />
<CfStatusIllustration size="md" />
<CfStatusIllustration size="lg" />

API

Prop	Type	Default	Description
`variant`	`'empty' \| 'search' \| 'upload' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'not-found' \| 'forbidden' \| 'server-error'`	`'empty'`	Status semantics
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`title`	`string`	—	Accessible when set; decorative otherwise

Already used by Empty / Result / Dropzone under the hood.