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.

Stacked toasts and positions

Toast also supports a layered stack via the stacked attribute. Combined with stack-position="top-center" or stack-position="bottom-center", notifications are stored in the center of the screen, the newest one stays on top, and older toasts shrink in the collapsed state. On hover, the stack expands to full size in the order in which they were created. You can use the same stack mode in corners via top-start, top-end, bottom-start and bottom-end. In the demo below you can change the mode, position and colour of the toast via the selects.

Stack configuration

• The stacked enables the new layered mode without changing the default behavior of regular toasts.
• The stack-position specifies the location of the stack. For centered mode, use top-center or bottom-center.
• The stack-depth specifies the number of visual levels in the collapsed state. The default value is 3.

When to use

Use wje-toast when you need to immediately communicate a status, the result of an action, or the next step to the user.

When not to use

Don't use multiple competing feedback channels at the same time for one event.

Accessibility

Communicate message status through appropriate ARIA live regions and manage focus (open/close) for modal elements.

Recommended practices

• Select the severity of the messages (info/success/warning/error) according to the real impact on the user.
• For blocking actions, prefer confirmation only where irreversible change is imminent.
• Set consistent timeouts so the user has time to read the message.
• For larger numbers of toasts, use stacked and appropriate stack-depth to keep the stack readable.
• For a centered stack, we recommend setting a uniform width via --wje-toast-stack-width.

Attributes and properties

closable

Description	Specifies whether the toast can be manually closed by the user. If true, the toast will include a close button or mechanism.
Attribute	closable
Type	boolean
Default	false

color

Description	Defines the color variant of the toast. Supports values such as primary, complete, success, warning, danger, info, and contrast.
Attribute	color
Type	string
Default	-

countdown

Description	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.
Attribute	countdown
Type	boolean
Default	false

duration

Description	Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.
Attribute	duration
Type	number
Default	-

headline

Description	Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.
Attribute	headline
Type	string
Default	-

icon

Description	Adds a leading icon into the media slot by icon name.
Attribute	icon
Type	string
Default	-

open

Description	Indicates whether the toast is currently open (visible). A value of true shows the toast, while false hides it.
Attribute	open
Type	boolean
Default	false

stackDepth

Description	Defines how many visual levels the collapsed stacked toast can show. Older toasts beyond this limit stay at the last reduced level. Default is 3.
Attribute	stack-depth
Type	number
Default	-

stackPosition

Description	Defines where the toast stack is placed on the screen. Supports top-start, top-center, top-end, bottom-start, bottom-center, and bottom-end.
Attribute	stack-position
Type	string
Default	-

stacked

Description	Enables a layered toast stack where the newest toast stays visually on top while older ones shrink behind it.
Attribute	stacked
Type	boolean
Default	false

Events

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

Methods

createToastStack

Description	Creates a toast stack container.
Signature	() => HTMLDivElement

getToastStackKey

Description	Returns the key of the toast stack.
Signature	() => string

applyToastStackPlacement

Description	Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.
Signature	(stack: HTMLDivElement) => void

syncToastStack

Description	Applies the current toast stack configuration to a stack element.
Signature	(stack: HTMLDivElement) => void

clearStackItemStyles

Description	Clears transient stack styling from a toast.
Signature	(toast: Toast) => void

getToastVisualHeight

Description	Measures the rendered height of a toast for stack overlap calculations.
Signature	(toast: Toast) => number

updateToastStack

Description	Recomputes the visual order of toasts inside the stack.
Signature	(stack: HTMLDivElement) => void

CSS shadow parts

Name	Description
native	The native part.

CSS custom variables

Name	Description
--wje-toast-stack-width	Defines the width of the toast stack container. Useful for centered stacked toasts and demo layouts.

Slots

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