Skip to content
Toast content
Toast text Toast text Toast text Toast text
Toast text Toast text Toast text 23:59 Custom toast
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:
Name | Type | Description | Slot | A11y |
---|---|---|---|---|
config | string | Setting this attribute to a | ||
timestamp | string | The timestamp of the toast. If not, current time is used | ||
content | string | The text of the toast | default |
Slots
This component has slots. Check the documentation about how to use the slots.
Name | Tags | Description |
---|---|---|
default | span | The content of the toast |
timestamp | span | The timestamp of the toast |
Parameters use
content
The thing to be assigned to the toast. It uses the default
slot too.
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
.
timestamp
The timestamp
parameter is used to define the time to be displayed in the toast. The format must be HH:mm
.
You can also set the timestamp using the timestamp
slot.
Both background color and text color can be customized using the --z-toast--bg
and --z-toast--color
CSS custom properties, respectively.
Browser support
Detected engine:
Chromium
Webkit
Gecko