BRAID
Braid Design System
GuidesFoundationsComponentsPatternsStyles

Empty state

Displays a message in place of content when none is available, guiding users on what to do next.

Appearance

Large and full-page

For empty states that take up most or all of the page, such as when there are no matching search results.

An example empty state

This is a center aligned example with a short summary. You can use a button or a TextLink to suit your needs.
 
Open in Playroom

Anatomy

  • Illustration (recommended): A static image that relates to the user’s situation
  • Heading: A short summary of the situation. Refer to the content guidelines below
  • Text: Copy that informs the user why the data can’t be displayed and/or what they might see when data becomes available
  • TextLink (optional): When appropriate, provide a link to further help or info
  • Button (optional): When appropriate, provide actions for what to do next

Visual guidelines

  • Display the message on a neutral surface. Avoid using heavy or saturated background colours such as brand accents.
  • Centre align components by default. Left align when the content includes a list, and optionally place the illustration to the left to save vertical space on longer content. It will still stack on mobile.

Small and inline

For empty states that sit within content, such as a dashboard widget or tile, use an Alert or Notice with the tone info. Do not use a large format empty state inline.

Widget title

Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit amet.

Widget title

Widget title

Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit amet.
 
Open in Playroom

Best practices

Content guidelines

Empty states usually fall into one of four categories. The type determines the response.

Negative

Aim of response: Support
Happens when…ExampleHow to respondRecommended message
  • the content doesn’t exist
  • there’s nothing for the user to do
The job ad hasn’t been live for long enough to collect ad performance data.
  • Explain why there’s no content.
  • Offer a workaround if there is one.
  • Be clear about whether the content is being created, i.e. they can come back later, vs. we have no plans to create this content.
No active jobs now[Company name] hasn’t posted any new jobs. Use our job search to find other vacancies.
No job applicants yetThis job ad hasn’t received any applications. Check how it’s performing against other similar ads.

Neutral

Aim of response: Instruct
Happens when…ExampleHow to respondRecommended message
  • the content doesn’t exist
  • there’s something for the user to do
There are no matching search results. The user can change their search parameters.
  • Explain clearly what the user needs to do.
  • Take the time and space to break the process into steps.
  • Provide as much information as needed to help users.
  • If the process is particularly tedious, try to inject some playfulness, if appropriate.
  • Include a clear CTA, if appropriate.
No matching search resultsWe couldn’t find anything that matched your search. Try adjusting the filters to broaden your search.

Positive

Aim of response: Celebrate
Happens when…ExampleHow to respondRecommended message
  • the user has cleared outstanding items
  • there’s nothing for the user to do
  • everything is working well
A hirer has cleared all the job applications in their inbox.
  • Acknowledge the work the user has done to get to this point.
  • Celebrate their achievement with the appropriate level of excitement proportionate to the amount of effort they’ve put in.
  • This is the time to inject playfulness and personality into the message, but make sure it’ll translate well.
All applications clearedGreat job! You’ve cleared all the applications here.

Onboarding

Aim of response: Explain
Happens when…ExampleHow to respondRecommended message
  • the user hasn’t used the feature yet
  • there’s something for the user to do
A candidate hasn’t saved any jobs yet.
  • Explain clearly what the feature is and what needs to be done.
  • Help the user understand why they should do this. Try to link this to the JTBD or task they’re trying to complete.
  • Give them a glimpse of what would happen if they were to complete the task or use the feature.
  • Include a clear CTA, if appropriate.
No saved jobs yetSave jobs you’re interested in so you can come back to them later.

When to use

Use an empty state when:
  • there is no data to display yet
  • there are no matching search results
  • a first time user must take an action to populate the data.
Don’t use an empty state when:
  • the website or app failed to complete an expected action (use an Error state instead)
  • the message sits within a section, card, or widget (use an Alert or Notice instead)
  • content is still loading (use a Skeleton loader instead).

Related

  • Error state — For communicating a failed action and guiding users toward a resolution.
  • Alert — For strong in-flow messages that sit at page or section level.
  • Notice — For light in-flow messages that sit within a section, card, or widget.
On this page