Illustration

The Illustration component displays various illustrations and graphics used throughout the Harness UI. It has built-in support for theme-specific variants.

Usage

<Illustration name="no-data-folder" size={112} />

Sizing

The Illustration component can be sized using the size prop which sets both width and height (default is 112px).

Theme Support

Some illustrations have theme-specific variants. Use the themeDependent prop to enable theme-sensitive rendering.

Illustrations with specific light theme variants will use them automatically when the theme is set to light. For illustrations without a light variant, enabling themeDependent will apply an invert filter in light mode.

Available Illustrations

The following illustrations are available:

create-workspace

no-data-branches

no-data-cog

no-data-commits

no-data-error

no-data-folder

no-data-members

no-data-merge

no-data-pr

no-repository

no-data-tags

no-data-webhooks

no-search-magnifying-glass

harness-logo-text

sub-menu-ellipse

chat-avatar

tooltip-arrow

chat-avatar-light

create-workspace-light

no-data-branches-light

no-data-cog-light

no-data-commits-light

no-data-error-light

no-data-folder-light

no-data-members-light

no-data-merge-light

no-data-pr-light

no-repository-light

no-data-tags-light

no-data-webhooks-light

no-search-magnifying-glass-light

API Reference

<Illustration
  name="illustration-name"  // name of the illustration
  size={112}               // [OPTIONAL] size in pixels for both width and height
  themeDependent={false}   // [OPTIONAL] whether to use theme-specific variants
  className="my-class"     // [OPTIONAL] custom class name
/>

Prop	Required	Default	Type
name	true		IllustrationsNameType
size	false	112	number
width	false		number
height	false		number
themeDependent	false	false	boolean
className	false		string