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

<script setup lang="ts">
import { CfStatusIllustration } from '@chufix-design/vue';
const variants = ['empty','search','upload','success','info','warning','error','not-found','forbidden','server-error'] as const;
</script>
<template>
  <div class="status-illustration-demo">
    <div v-for="v in variants" :key="v" class="status-illustration-demo__item">
      <CfStatusIllustration :variant="v" />
      <div class="status-illustration-demo__label">{{ v }}</div>
    </div>
  </div>
</template>
<style scoped>
.status-illustration-demo {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
}

.status-illustration-demo__item {
  min-height: 124px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-5);
  background: color-mix(in oklch, var(--bg-1), transparent 8%);
}

.status-illustration-demo__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  text-align: center;
}
</style>

<script setup>
import { CfStatusIllustration } from '@chufix-design/vue';
const variants = ['empty','search','upload','success','info','warning','error','not-found','forbidden','server-error'];
</script>
<template>
  <div class="status-illustration-demo">
    <div v-for="v in variants" :key="v" class="status-illustration-demo__item">
      <CfStatusIllustration :variant="v" />
      <div class="status-illustration-demo__label">{{ v }}</div>
    </div>
  </div>
</template>
<style scoped>
.status-illustration-demo {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
}

.status-illustration-demo__item {
  min-height: 124px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-5);
  background: color-mix(in oklch, var(--bg-1), transparent 8%);
}

.status-illustration-demo__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  text-align: center;
}
</style>

import { CfStatusIllustration } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfStatusIllustration variant="empty" />
      <CfStatusIllustration variant="search" />
      <CfStatusIllustration variant="upload" />
      <CfStatusIllustration variant="success" />
      <CfStatusIllustration variant="not-found" />
    </>
  );
}

import { CfStatusIllustration } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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

<script setup lang="ts">
import { CfStatusIllustration } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 24px;">
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="sm" />
      <div>size = sm</div>
    </div>
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="md" />
      <div>size = md</div>
    </div>
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="lg" />
      <div>size = lg</div>
    </div>
  </div>
</template>
<style scoped>
.status-size-demo {
  min-width: 116px;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
</style>

<script setup>
import { CfStatusIllustration } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 24px;">
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="sm" />
      <div>size = sm</div>
    </div>
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="md" />
      <div>size = md</div>
    </div>
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="lg" />
      <div>size = lg</div>
    </div>
  </div>
</template>
<style scoped>
.status-size-demo {
  min-width: 116px;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
</style>

import { CfStatusIllustration } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfStatusIllustration size="sm" />
      <CfStatusIllustration size="md" />
      <CfStatusIllustration size="lg" />
    </>
  );
}

import { CfStatusIllustration } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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.