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. If not set, the current time will be used.
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