Empty state

Empty state content

Implementations

The component EmptyState is available in the following technologies:

CSS Components

Web Components

Make sure you have read about the parameters in here.

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

Name	Type	Slot	Description
`image-src`	`string`	✅	The `image-src` is the URL of the image to be used.
`image-alt`	`string`		Alternative text for image accessibility
`cross-origin`	`string`		The `crossorigin` attribute of the image. Provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data.
`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
`custom`	`object`		A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: html `<z-empty-state custom='{"fill":"#06e7a3"}' />` Check the available values in the customization section.
`custom-str`	`string`		The stringified version of the `custom` property. It follows the pattern `key:value;key:value;`, with the possibility of setting multiple values and spaces between the punctuation characters. Example: html `<z-empty-state custom-str="fill:#06e7a3" />`
`z-theme`	`string`		Sets the theme of the component. The possible values are `light` and `dark`. html `<z-empty-state z-theme="dark" />`

You can check the Figma implementation here. This are the available properties:

INFO

Check everything about the customization mechanics in the "How it works" documentation.

No customization tokens yet implemented for this component

...