EmptyState - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-empty-state>
tag:
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
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 |
content | string | The content of the empty state |
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 |
The events emitted from the component are:
Name | Payload | Description |
---|---|---|
onclick | Event | Emitted when the button is clicked |
The available slots for the component are:
Name | Tags | Description |
---|---|---|
default | span |
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
header
The header
parameter is used to define the header of the empty state component.
content
The content
parameter is used to define the content of the empty state component.
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.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.0/@zurich/web-components/empty-state.js"></script>
Code
html
<z-empty-state header="Access forbidden" pictogram="digital-lock" button-text="Contact administrator">
<p>
Access to this page is restricted. Please contact your administrator.
</p>
</z-empty-state>