Illustrated Message

An illustrated message displays an illustration along with a message, typically used for empty states or error pages.

Example

UI recommendations

Recommendations for creating an illustrated message:

1. The message should be concise and, if applicable, describe the next step a user can take.
2. The heading should be no longer than 6 words and should not be a replacement for the message text.
3. Use sentence case for the heading and message text.
4. Use illustrations that are relevant to the message and help convey the context effectively.
5. Reserve illustrated messages for situations where they add value and clarity, rather than using them for minor notifications or messages.

Content

An illustrated message is made up of three parts: an illustration, a heading, and a body.

You can populate these sections by providing the following components as children: an ui.icon for the illustration, a ui.heading for the heading, and ui.content for the body.

Labeling

If the heading of an illustrated message isn’t specified, set the aria-label prop for accessibility purposes.

Placeholder

Using an illustrated message as a placeholder for a table or list can clearly indicate the absence of data and provide context-specific guidance.

API reference

An IllustratedMessage displays an illustration and a message, usually for an empty state or an error page.

Returns: Element The rendered IllustratedMessage component.

Parameters	Type	Default	Description
*children	Any		The content of the IllustratedMessage which consist of three areas: an illustration, a title, and a body.
key	str | None	None	A unique identifier used by React to render elements in a list.