Illustrations

EuiIllustration renders theme-adaptive SVGs. Each illustration ships a light and a dark variant and the component inlines the one that matches the current theme.

SVGs are sourced from @elastic/eui-illustrations, a standalone package that is independently versioned and published from @elastic/eui. This means the catalog can grow and change without an @elastic/eui release.

Component

Pass an illustration asset to the type prop. The component picks the correct color-mode variant automatically, so try toggling the theme in the top toolbar.

Loading...

Accessibility recommendation

The accessible label defaults to the illustration's title. Provide a more specific alt when the illustration conveys meaning or pass alt="" to mark it as purely decorative (it will be hidden from assistive technology).

All illustrations

Search the full catalog exported from @elastic/eui-illustrations. Select an illustration to reveal the code.

Props

EuiIllustration

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop type# ↦	Description and type The illustration asset to render, typically imported from @elastic/eui-illustrations. Type: EuiIllustrationSource ↦	Default value Required ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop alt# ↦	Description and type Accessible label for the illustration. Defaults to the illustration's title. Pass an empty string to mark the illustration as decorative. Type: string ↦	Default value ↵
Prop fullWidth# ↦	Description and type When true, stretches the SVG to fill the full width of its container. When false, the SVG maintains its intrinsic width. Defaults to true. Type: boolean ↦	Default value true ↵

𐘂𐘂