Illustrated Message
Empty, error, and no-results messaging with an illustration, supporting text, and an optional action.
Nothing here yet
Add content or create a new item to get started.
Anatomy
Nothing here yet
Add content or create a new item to get started.
- 1 Illustration — visual slot for an icon, SVG, or decorative asset
- 2 Content — heading and supporting description
- 3 Actions — optional primary next step
Presets
Nothing here yet
Add content or create a new item to get started.
Something went wrong
Try again or go back to the previous step.
No results found
Try adjusting your filters or search terms.
Options
| Property | Values | Default |
|---|---|---|
| preset | empty / error / no-results | empty |
| heading | text | Preset-specific |
| description | text | Preset-specific |
| illustrationIcon | icon name | Preset-specific |
| actionLabel | text | — |
| actionHref | URL | — |
| actionVariant | solid / outline / ghost | solid |
Custom illustration slot
Supply custom markup in the illustration region when an icon is not enough.
<uif-illustrated-message heading="Invite your team" description="Add collaborators to start working together.">
<span slot="illustration" class="uif-avatar xl" role="img" aria-label="Team">
<span class="uif-avatar-initials">UI</span>
</span>
<a slot="action" class="uif-button solid" href="/invite">Invite teammates</a>
</uif-illustrated-message>
Accessibility
- Treat illustrations as decorative unless they communicate unique meaning.
- Keep the heading concise and the description actionable.
- Include a single clear action when the user can recover immediately.
Design checklist
Preset coverageIncludes empty, error, and no-results defaults.
Flexible illustration slotSupports icons by default and custom illustration markup when needed.
Design tokensComponent-scoped tokens (
--uif-illustrated-message-*).