UNPKG

@mozaic-ds/vue

Version:

Mozaic-Vue is the Vue.js implementation of ADEO Design system

29 lines (20 loc) 1.42 kB
# MToaster A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability. ## Props | Name | Description | Type | Default | | --- | --- | --- | --- | | `open` | If `true`, display the Toaster. | `boolean` | - | | `position` | Position of the toaster. | `"top"` `"bottom"` `"top-center"` `"bottom-center"` | - | | `description*` | Description of the toaster. | `string` | - | | `status` | Allows to define the toaster style. | `"info"` `"warning"` `"error"` `"success"` | `"info"` | | `closable` | If `true`, display the close button. | `boolean` | `true` | | `progress` | If `true`, display the progress bar of the duration. | `boolean` | - | | `timeout` | Duration of the toaster | `number` | - | ## Slots | Name | Description | | --- | --- | | `action` | Use this slot to insert a button or a link in the toaster | ## Events | Name | Description | Type | | --- | --- | --- | | `update:open` | Emits when the checkbox value changes, updating the modelValue prop. | [value: boolean] |