Toast - CSS Component ​

The Toast component can be used imported from:

Playground ​

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

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​