Skip to content

Toast - Web Component

The Toast component can be used imported from:

Playground

Parameters

The Web component uses the <z-toast> tag:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

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

NameTypeDescriptionSlotA11y
configstring

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

timestampstringThe timestamp of the toast. If not, current time is used
contentstringThe text of the toastdefault

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

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

Custom toast

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example