An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.

Illustrated message

Do

Use the illustrated message:

• To improve the user experience for one or more empty states or message states in your application.

Don't

Don’t use the illustrated message:

• For decoration purposes or as a simple image.
• If you want to display a person or a product image. Use the avatar instead.
• To display problem-oriented messages.

1. Illustration: Helps clarify the situation. The illustration must always be paired with a message.
2. Headline: Explains the reason for the empty state, preferably in a single line.
3. Description: Adds details and, where appropriate, tells the user what to do next, in three lines or less.
4. Button (optional): If there is a clear next step, include a call to action (CTA) button.

Anatomy of an illustrated message

Spot

Illustrated message - spot size for small containers, such as cards

Dot (coming soon)

Illustrated message - dot size for small cards or tiles

Base

Illustrated message - base size with no image (for example, in a table cell)

The illustrated message uses a button for the call to action.

[internal_only]For the mouse interaction and touch enablement, see the button specification.[/internal_only]

Illustrated message