Empty

Overview#

Empty states are used when there is no content to display on a page or component, including but not limited to cards, tables and modals. Global Patterns

Design Guidelines#

Use when#

  • There are no results to display - some examples are:
    • A search query was made and there were no results
    • A feature has not been configured yet

Don't use when#

  • The result of having no items to display is caused by a system or user error.

Visual Style#

  • Always use the appropriate empty state component.
  • Always use the default copy unless a more appropriate message is listed in the Content Library Table in the editorial section.

Behaviour#

  • Static i.e. nothing happens on click.
  • Do not use call-to-actions.

Editorial#

  • Always write in sentence case (the first word, proper nouns and some specified words are capitalized, eg. No results found in RQmobile).

  • Keep your messages short and descriptive.

  • Avoid using punctuation

  • Use the following content library table for alternative messaging options that are more appropriate for the empty state.

    Message ContentUsage
    No results foundNo results after searching or filtering
    No results foundIf nothing has been configured

Page-level Use for empty component on a page.

Preview example in Storybook

Component-level Use for empty component within other components.

Preview example in Storybook

Last updated on by Paulo Andrade