Empty state > Where to use

Where to use

In tables

Tables are the primary way we show both tabulated data (and application tables) in both applications and content sites. It’s often possible to see a table in an empty state due to a first run / onboarding experience.

The pattern consists of a panel with required elements:

  • (1) Title *
  • (2) Body *
  • (3) Primary action (optional) which could be supplementary links to documentation or alternative options.

In cards

This section of the specification refers to card elements in the views on both desktop and mobile. It’s possible for most of the view to load, but for one or more cards to be in an empty state.

The pattern consists of a panel with required elements:

  • (1) Title *
  • (2) Body *
  • (3) Alternative action (optional) which could be supplementary links to documentation or alternative options.
    Screen Shot 2021-10-13 at 7.12.24 PM

Example

In page views

This section of the specification refers to whole views in the application or content-driven site, on both desktop and mobile.

The pattern consists of a panel with required elements:

  • (1) Title *
  • (2) Body *
  • (3) Blue link (optional) which could be supplementary links to documentation or alternative options.
  • (4) Primary button *
  • (5) Secondary action (optional) which can be ‘close’, ‘ go back’, or alternative actions to the primary action.

Example