Toast - CSS Component
The Toast component can be used imported from:
Playground
Customization
| CSS Variable | Type | Active | Control |
|---|---|---|---|
--z-toast--color | color | ||
--z-toast--bg | color | ||
--z-toast--radius | distance |
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
Both background and text color can be customized using the --z-toast--bg and --z-toast--color CSS custom properties respectively.
Toast message
Browser support
Detected engine:
Chromium
Webkit
Gecko