Skip to content

Empty state - CSS Component

The EmptyState component can be used imported from:

Playground

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