State zero or the empty state is a state where there is no data to display in the UI. It is most commonly used when a new feature is developed or a user interacts with the page for the first time. It can also be used when all data is deleted or unavailable. Empty states inform, support, and provide constructive guidance about the next steps when there is nothing to display.
No data available denotes the empty state scenario for when we cannot display data.
User action triggers empty state
This scenario describes when there is no content available to show as a result of an action. For instance, searching or filtering items in a list, table, page, or results that shows up in cards.
Error management empty state
This scenario describes when there is no content available to show as a result of errors such as no server connection, entering the wrong page, or something went wrong with the http requests.
To import either or all of these components into your project, copy the snippets below and include it in your main Sass file.
// import Vanilla and include base mixins // this only needs to happen once in a given project @import 'vanilla-framework'; @include vf-base; // dependencies for the no content empty state example @include vf-p-grid; @include vf-u-align; @include vf-p-buttons; @include vf-p-strip; // dependencies for user action triggered empty state example @include vf-p-strip; @include vf-p-lists; @include vf-p-search-box; @include vf-p-icons-common; @include vf-p-icon-search; @include vf-u-layout; // dependencies for user action triggered empty state example @include vf-u-vertically-center;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.