StellarUI

<stellar-toast>

toast stack manager with fixed placement, item creation methods, and dedicated toast items.

Properties

Add toast

Clear

Preview

Live stack

Use the controls above to create a toast on the page-level stack.

Markup

Copy

<stellar-toast placement="bottom-end">
  <stellar-toast-item tone="primary" icon="mdi:check-circle-outline">
    <strong>Saved</strong>
    <span>Your changes were synced successfully.</span>
  </stellar-toast-item>
</stellar-toast>

API

Complete props, events, slots, and implementation notes for the shipped toast stack.

Props

Prop	Type	Default	Notes
`placement`	`top-start \| top-center \| top-end \| bottom-start \| bottom-center \| bottom-end`	`bottom-end`	Controls where the toast stack appears on screen.

Events

Event	Source	Notes
`create()`	host method	Creates and prepends a `stellar-toast-item` from a string payload and returns the item element.
`createFromTemplate()`	host method	Clones a `<template>` containing one `stellar-toast-item` and prepends it to the stack.
`empty()`	host method	Closes and removes every toast item in the stack.

Slots

Slot	Notes
default	One or more `stellar-toast-item` children already present in the stack.

Notes

The public tags are `stellar-toast` for the stack and `stellar-toast-item` for individual notifications.
The stack now follows the model more closely: one fixed-position manager with item creation methods instead of a pure placement wrapper.
`stellar-toast` exposes `create()`, `createFromTemplate()`, and `empty()` on the host, and `Escape` dismisses the most recent item while the stack is visible.
`stellar-toast-item` owns tone, icon, duration, auto-dismiss timing, and the close affordance. Its standalone docs now live on `/components/stellar-toast-item`.
The stack preview stays page-level so placement matches production usage instead of a fake viewport box.