shadow
The Toast component provides an unobtrusive way of displaying short notifications to the user. They are designed to appear and disappear seamlessly, ensuring that important information reaches users without being intrusive.
Use wje-toast to communicate status, result of actions, or required next steps immediately.
Do not show multiple feedback channels for the same event unless there is a strong reason.
Announce status updates with suitable ARIA live regions and manage focus for modal interactions.
- Match message severity (info/success/warning/error) to actual user impact.
- Use confirmations only for destructive or hard-to-reverse actions.
- Keep timeouts consistent so users have enough time to read messages.
| Description | Set closable value of the toast. |
| Attribute | closable |
| Type | boolean |
| Default | false |
| Description | Set color value of the toast. |
| Attribute | color |
| Type | string |
| Default | - |
| Description | Set countdown value of the toast. |
| Attribute | countdown |
| Type | boolean |
| Default | false |
| Description | Set duration value of the toast. |
| Attribute | duration |
| Type | number |
| Default | - |
| Description | Set headline value of the toast. |
| Attribute | headline |
| Type | string |
| Default | - |
| Description | Set icon value of the toast. |
| Attribute | icon |
| Type | string |
| Default | - |
| Description | Set open value of the toast. |
| Attribute | open |
| Type | boolean |
| Default | false |
| Name | Description |
|---|
wje-toast:after-show | Fired after the toast is shown. |
wje-toast:after-hide | Fired after the toast is hidden. |
No public methods available for this component.
| Name | Description |
|---|
native | The native part. |
| Name | Description |
|---|
headline | Specifies the headline text of the toast. Represents the main title or heading displayed in the toast. |
open | Indicates whether the toast is currently open (visible). A value of true shows the toast, while false hides it. |
duration | Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed. |
closable | Specifies whether the toast can be manually closed by the user. If true, the toast will include a close button or mechanism. |
color | Defines the color of the toast. Accepts any valid CSS color value such as hex, RGB, or named colors. |
countdown | Indicates whether a countdown is displayed in the toast. When true, a visual countdown timer is shown to indicate the remaining time before the toast closes. |
| Name | Description |
|---|
default | The content of the toast. |
media | The media of the toast. |