Toast - Web Component ​

The Toast component can be used imported from:

Playground ​

Parameters ​

...

Slots ​

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanThe content of the toast
timestampspanThe timestamp of the toast

Parameters use ​

content ​

The thing to be assigned to the toast. It uses the default slot too.

Toast content

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.

Toast textToast text

You can also set the timestamp using the timestamp slot.

Toast text 23:59

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​