diff --git a/packages/documentation/pages/usage/components/toaster.vue b/packages/documentation/pages/usage/components/toaster.vue index 66e627f128..ee01e86505 100644 --- a/packages/documentation/pages/usage/components/toaster.vue +++ b/packages/documentation/pages/usage/components/toaster.vue @@ -9,11 +9,12 @@ Toasters can deliver messages that the user needs to pay attention to without in ![Toaster Structure](~/assets/img/toaster_structure.png) -1. Type Color: Depends on the type of toaster. There are three colors: +1. Type Color: Depends on the type of toaster. It uses the Kotti Color Tokens for success, error, warning: - - `Green-500`: for success information - - `Orange-500`: for warning message - - `Red-500`: for fail/alert message + - `var(--support-error)`: for type `error` + - `var(--support-info)`: for type `info` + - `var(--support-success)`: for type `success` + - `var(--support-warning)`: for type `warning` 2. Message: Keep the message short and easy to understand, since the toaster disappears automatically after a few seconds. @@ -26,15 +27,19 @@ Since `Kotti-UI 1.0.0`, [vue-yodify](https://github.com/3YOURMIND/vue-yodify) is