Renders and animates a list of messages, teleported to the top of the screen so it floats above everything. Presentational only: the host owns the list and its timing and mutates a reactive array. Each entry is { id, message, type?, icon? }; type picks the colour, defaulting to a neutral pill. The container ignores pointer events so it never blocks the UI, and each pill is a polite status region.
Examples
Message types
The stack teleports to the top of the screen. Toggle a set of the four types on and off.
<div>
<UiButton
@click="state.toasts = state.toasts?.length ? [] : [
{ id: 1, message: 'Saved', type: 'success', icon: 'mdi:check' },
{ id: 2, message: 'Heads up', type: 'warning' },
{ id: 3, message: 'Something went wrong', type: 'error' },
{ id: 4, message: 'Just so you know', type: 'info' },
]"
>
Toggle toasts
</UiButton>
<UiToast :toasts="state.toasts || []" />
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
| toasts | array | [] | Messages to show, each `{ id, message, type?, icon? }` with a stable, unique id. |
| position | string | 'top' | Where the stack anchors on screen. topbottom |