Illustration picks a named token SVG from @servicetitan/anvil2-illustrations using kebab-case scenario or header context, plus segment and trade. Prefer a named import from @servicetitan/anvil2-illustrations when you already know the artwork. Illustration pulls in every named illustration.
The catalog, filenames, and light/dark import paths live on Illustrations.
Installation
Illustration depends on @servicetitan/anvil2-illustrations. Theme follows AnvilProvider through illustration color tokens. There is no mode prop and no light/dark file swap.
Usage
Pass the facts on the component, or set defaults withIllustrationProvider. Props override the provider.
Resolution
Empty states default to theresidential segment when none is given via props or provider. With a segment, they try in order: the exact segment + trade file (only when trade is set), that segment’s evergreen file, then generic art. Every scenario has generic art, so empty states always render. A commercial segment never borrows residential art. Falling back to generic art with a segment warns in development.
Headers default to the residential segment when none is given via props or provider. context="project" also needs trade. context="service-agreements" always renders the commercial illustration. Customer and location headers use segment and ignore trade.
Missing art returns
null.
Size
Empty states take asize of "default" or "large". The width depends on the view from useAdaptiveView: mobile applies below the md breakpoint when the primary pointer is coarse. Height follows the artwork’s aspect ratio.
width or height overrides size, and the SVG renders at the dimensions you pass. Headers ignore size and render at their native 240px width.
Accessibility
Illustration stays decorative unless you pass a non-empty alt. That sets role="img" and aria-label. Use empty alt or omit it when adjacent title and body already explain the state.
width or height replaces the size width.
Illustration props
type defaults to "empty-state". scenario is required for empty states. context is required for headers. segment and trade override IllustrationProvider.