Toast - Web Component

...

Browser support

Parameters

The Web component uses the <z-toast> tag:

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

Name	Type	Description
config (optional)	string	Setting this attribute to a div tag will render a toast component. Possible values are: info, alert, negative, positive.
timestamp (optional)	string	The timestamp of the toast. If not, current time is used
content (optional)	string	The text of the toast

config

The config parameter is used to define the toast status. Possible values are: info, alert, negative, positive. Being omitted, the default value is info.

Toast textToast textToast textToast text

timestamp

The timestamp parameter is used to define the time to be displayed in the toast. The format must be HH:mm. If not set, the current time will be used.

Toast textToast text

Both background color and text color can be customized using the --z-toast--bg and --z-toast--color CSS custom properties, respectively.

Custom toast

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.10/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.10/@zurich/web-components/toast.js"></script>

Code

<z-toast config="info" timestamp="15:46">Toast text</z-toast>
<z-toast config="alert" timestamp="15:46">Toast text</z-toast>
<z-toast config="positive" timestamp="15:46">Toast text</z-toast>
<z-toast config="negative" timestamp="15:46">Toast text</z-toast>