EmptyState - CSS Component ​

Playground ​

Customization ​

Construction ​

The CSS component uses a <section> tag, with the z-empty-state HTML custom attribute.

z-empty-state ​

The z-empty-state attribute is the main attribute used to render the empty state CSS component.

Inside the <section> tag, you can add the following elements:

  • title - The header of the empty state using the <h3> tag.
  • description - The content of the empty state.
  • button - The button to add an action to the empty state.

Empty state header

Empty state content

Also you can add an illustration or a pictogram. Using the image component or the pictogram component respectively.

Empty state header

Empty state content

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​