Skip to content 
Toast message
Custom toast
Toast
Changes in status, confirmations and updates in the background without interrupting users' workflow, and can be colored-coded to visually communicate their status: inf, positive, negative or alert.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
| CSS Variable | Type | Description |
|---|---|---|
--z-toast--color | color | Font color |
--z-toast--bg | color | Background color |
--z-toast--radius | distance | Radius of the button |
Both background color and text color can be customized using the --z-toast--bg and --z-toast--color CSS custom properties, respectively.
Also the radius can be customized using the --z-toast--radius CSS custom property.
Custom toast