Empty state - Web Component

The EmptyState component can be used imported from:

Playground

Parameters

The Web component uses the <z-empty-state> tag:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description	Slot	A11y
image-src	string	The URL of the image to display
image-alt	string	The alt text of the image
pictogram	string	The name of the pictogram to display
header	string	The title of the empty state	header
content	string	The content of the empty state	default
button-text	string	The text of the button
button-icon	string	The icon of the button
button-icon-right	boolean	Whether the icon should be displayed on the right side of the button

Events

This component has events. Check the documentation about how to use the events.

Name	Payload	Description
click	Event	Emitted when the button is clicked

Slots

This component has slots. Check the documentation about how to use the slots.

Name	Tags	Description
default	span	The content of the empty state
header	span	The title of the empty state
actions	span	The actions to display

Parameters use

content

The content parameter is used to define the content of the empty state component. It uses the default slot too.

Empty state content

header

The header parameter is used to define the header of the empty state component. It uses the header slot too.

Header

Empty state content

Image

image-src

The image-src parameter is used to define the image URL to be displayed inside the empty state component.

You can also use the images from the Zurich media images. Make sure you specify correctly the name of the image you want to display.

Empty state content

image-alt

The image-alt parameter is used to define the alt text for the image displayed inside the empty state component.

pictogram

The pictogram parameter is used to define the pictogram to be displayed inside the empty state component. Make sure you specify correctly the name of the pictogram you want to display. Check the Pictogram component for the list of available pictograms.

If both image-src and pictogram are defined, the pictogram will be displayed.

Empty state content

Button

button-text

The button-text parameter is used to define the text of the button displayed inside the empty state component.

button-icon

The button-icon parameter is used to define the icon of the button displayed inside the empty state component.

button-icon-right

The button-icon-right parameter is used to define the icon of the button displayed inside the empty state component on the right side.

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example