Skip to content

Toast - CSS Component

...

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

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 background 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.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@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>