Toast

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.

When to use

Use wje-toast to communicate status, result of actions, or required next steps immediately.

When not to use

Do not show multiple feedback channels for the same event unless there is a strong reason.

Accessibility

Announce status updates with suitable ARIA live regions and manage focus for modal interactions.

Best Practices

• 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.

Attributes and Properties

No properties available for this component.

Events

Name	Description
wje-toast:after-show	Fired after the toast is shown.
wje-toast:after-hide	Fired after the toast is hidden.

Methods

startTimer

Description	Starts the timer. This method sets the startTime property to the current time and sets the timeoutID property to the ID of the timeout. The method also dispatches the wje-toast:after-hide custom event when the timeout expires.
Signature	() => void

stopTimer

Description	Stops the timer. This method clears the timeout and calculates the remaining time. The method is called when the toast notification is paused.
Signature	() => void

resumeTimer

Description	Resumes the timer. This method resumes the timer if the remaining time is greater than zero. The method is called when the toast notification is resumed.
Signature	() => void

removeChildAndStack

Description	Removes the toast notification and the toast stack. This method removes the toast notification from the toast stack and removes the toast stack from the document body if the toast stack is empty.
Signature	() => void

CSS Shadow Parts

Name	Description
native	The native part.

CSS Custom Properties

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.

Slots

Name	Description
default	The content of the toast.
media	The media of the toast.