Toast ​

...

Browser support ​

...

Parameters ​

The CSS component uses a <div> tag.

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

NameTypeDescription
z-toaststring

Setting this attribute to a div tag will render a toast component. Possible values are: info, alert, negative, positive.

timestampstringThe timestamp of the toast
contentstringThe text of the toast

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Toast.css" />
Code
html

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