Illustration

Foundations · src/components/Illustration/Illustration.tsx

One of the system's drawings, at one of three sizes.

Constructions carry the identity and get the larger frame; everything else is an Object and is drawn at icon scale, for an empty state or a failure. The split is what keeps a "no results" panel from being handed the full-bleed treatment meant for a launch page.

An unknown name returns null on purpose: a missing drawing should leave a gap a reviewer notices, not a placeholder box that ships.

Import

import { Illustration } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
name	string	Which drawing. An unknown name renders nothing rather than a broken frame.
size	'sm' | 'md' | 'lg'
alt	string	Names the drawing. Leave it off when the drawing only repeats adjacent text.
className	string
style	React.CSSProperties