Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
General Guidelines
- Always provide a meaningful action if one exists. Avoid dead ends by suggesting the next step (e.g., “Try again,” “Create new,” “Reload”).
- Match the icon/illustration to the situation. Use visual cues to reinforce the context (e.g., search, error, or success).
- Keep messages short and straightforward. Use a clear title and concise body text.
- If more than one Blank State appears on the same screen, reduce visual noise — for example, by using text-only states.
- Prioritize one primary CTA. If there are additional options, limit them to a single secondary button.
- Use the correct size for the layout:
- Small: for containers up to 569px.
- Large: for 570px and above.
- Messages should be constructive and positive. Instead of focusing on what’s missing, encourage progress (e.g., “Start by adding…” rather than “Nothing here yet”).
- Support accessibility:
- Ensure all actions are keyboard-accessible and have sufficient tap targets
- Avoid jargon and use plain language.
When to Use Blank States
|
Type |
When to Use |
Message Focus |
Recommended Actions |
Visual Treatment |
|---|---|---|---|---|
|
No data |
When a user interacts with a feature for the first time or after content has been deleted. |
Explain why there’s no content yet and how to begin. |
Provide a primary CTA to create, add, or import data. Optionally add a secondary CTA to documentation or help. |
Neutral or playful illustration. Optional small icon for context (e.g., add, info). |
|
Feedback |
When a user action produces no results (e.g., search or filters). |
Clarify that nothing matched and suggest adjustments. |
Offer a primary CTA like “Refine Search” or “Clear Filters.” Keep tone constructive. |
Text-only or lightweight illustration to avoid clutter if shown in multiple places. |
|
Error |
When content cannot be displayed due to system, network, or permission issues. |
State what went wrong in clear, non-technical terms. |
Provide a recovery action: “Reload,” “Try Again,” or a help link. |
Illustration or small icon with semantic meaning (error, warning). |
|
Success |
After completing a task or clearing content. |
Confirm that the action was successful and there’s nothing left to show. |
Offer a relevant next step or allow the user to dismiss. |
Positive illustration or checkmark symbol. Keep tone light and encouraging. |
Content
Title
Titles provide a quick, scannable summary of the blank state’s purpose.
- Conciseness: Keep titles short — just a few words that summarize the situation at a glance.
- Clarity: Focus on explaining why the space is empty, rather than emphasizing what’s missing.
- Punctuation: Do not end titles with punctuation marks (periods, exclamation points, or question marks).
Body
Body text expands on the title by providing context and guidance.
- Line Limit: Restrict body text to a maximum of three lines for readability and scannability.
- Actionability: Where possible, suggest a clear next step to help the user move forward.
- Punctuation: Always end with a full stop to complete the statement cleanly.
- Clarity: Use plain, generic language. Avoid product-specific terms or internal jargon.
Call-to-Action (CTA) Buttons
CTAs guide users out of the blank state by offering clear, actionable next steps.
- Button Limit: Display no more than two buttons at a time to avoid overwhelming the user.
- Primary CTA:
- Keep the label to one or two words.
- Direct the user to either dismiss the screen or take the most logical next step.
- Do not include a full stop at the end.
- Secondary CTA:
- Use one or two words for the label.
- Provide an alternative but relevant next step, such as linking to another area of the app.
- Do not include a full stop at the end.
Do
For title and body message use sentence case, and for CTAs use title case.
Don't
Don’t mix capital and lowercase.
Illustrations
Illustrations support the message of a blank state by adding context and personality.
Relevance
- Appropriateness: Choose illustrations that match the context of the blank state.
- Tone: Keep the style neutral or lightly playful.
- Clarity: Avoid unrelated or overly negative imagery.
Do
Use illustrations that are relevant, neutral, or lightly playful.
Don't
Don't use negative or unrelated imagery.
Background
These are recommendations, not strict rules — background size and fill should always be chosen based on the actual placement and surrounding layout.
- Size: Match background proportions to the illustration’s shape — narrow for vertical graphics, wide for horizontal ones.
- Fill:
- Use solid fills for calm, understated support.
- Use gradients to add emphasis or depth against plain layouts.
- Avoid overusing gradients, as multiple on one screen reduce clarity.
Do
Use a narrow gradient background with vertically oriented illustrations. The proportions match the illustration’s shape, and the gradient adds emphasis without overwhelming the layout.
Don't
Don’t use a background size that is too narrow for the illustration, as it makes the image feel cropped and unbalanced.
Small Icon Usage
- When to Use: Add a small icon when the illustration is neutral or abstract, to provide extra semantic meaning (info, success, error, etc.).
- When Not to Use: Skip the small icon if the illustration already conveys meaning (e.g., warning triangle, error “X”, question mark, happy/sad face).
- Complement, Don’t Repeat: The small icon should enhance the illustration’s meaning, not duplicate it.
Do
Use the small icon to add semantic meaning when the main illustration is neutral or abstract.
Don't
Don't use the small icon if the illustration already includes a symbol.
Don't
Don't use the small icon if the illustration already includes a semantic symbol.
Don't
Don't use the small icon when the illustration itself conveys the message clearly.
Layout and Alignment
These are recommendations, not strict rules. Layout choices should be guided by container size, screen context, and how many blank states appear together. The goal is to maintain clarity and consistency without overwhelming the user.
Alignment
- Center alignment: Best for full-screen or large containers (dashboards, page-level states). Works well for first-time use, errors, or states with illustrations and primary CTAs.
- Left alignment: Recommended for smaller containers (widgets, side panels, tables). Keeps rhythm with multi-column layouts and text-based states.
- Flexibility: Center alignment may also be used in small containers if it better suits the design.
Do
Use a large, centered blank state when the layout is full width.
Do
Use a large, centered blank state when the container is wider than 570px.
Do
Use a small, left-aligned blank state in compact containers such as widgets, side panels, or cards.
Caution
In smaller containers, center alignment can also work if it fits better with the surrounding layout. Evaluate context before deciding.
Multiple Blank States
- Simplify visuals if many blank states appear on the same screen (e.g., in dashboards with multiple widgets).
- Use text-only or smaller treatments instead of repeating illustrations and CTAs in every container.
- Limit the number of CTAs to avoid clutter — prioritize one main action per view.
Do
When multiple blank states appear on the same screen, use versions without illustrations to reduce visual noise. Be mindful of CTAs - prefer secondary CTAs if a primary action is already present elsewhere on the screen.
Don't
Avoid overusing illustrations within a single view. If more than one illustration is necessary, adjust the background, illustration, small icon, and CTA so that only the most important blank state receives visual emphasis.
Tables and Structured Layouts
- Replace the table body with a blank state message when no data is available.
- Keep column headers and footers visible only if they provide meaningful context.
- Ensure the empty state is announced first in screen readers (not after the entire table).