Skip to content

Toast - CSS Component โ€‹

...

Browser support โ€‹

Construction โ€‹

The CSS component uses a <div> tag with the z-toast HTML custom attribute.

z-toast โ€‹

The z-toast attribute is the main attribute used ro render the toast component. Check the toast styling list here.

Toast message

Other styling options apart from default info are alert, negative and positive.

Toast message
Toast message
Toast message

timestamp โ€‹

The timestamp attribute is used to render the timestamp of the toast message.

Toast message

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

Toast message

Playground โ€‹

Customization โ€‹

HTML Examples โ€‹

Imports
html
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.2/@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>