Empty
#
OverviewEmpty 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.
#
EditorialAlways 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 Content Usage No results found No results after searching or filtering No results found If nothing has been configured
Page-level Use for empty component on a page.
Component-level Use for empty component within other components.