StellarUI

<stellar-toast-item>

Individual toast notification surface with tone, icon, duration, and close-button control.

Properties

Preview

Saved Your changes were synced successfully.

Restore item

Markup

Copy

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

API

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

Props

Prop	Type	Default	Notes
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`	Controls the accent line, icon color, and progress accent.
`icon`	`string`	`''`	When present, renders a built-in `stellar-icon` in the leading visual area.
`close-icon`	`string`	`mdi:close`	Controls the built-in dismiss icon when the close button is rendered.
`duration`	`number`	`5000`	Milliseconds before auto-dismiss. Use `0` to require manual dismissal.
`without-close`	`boolean`	`false`	Removes the built-in close button. Use this only when the item still has another clear dismissal path.

Events

Event	Source	Notes
`before-close`	`stellar-toast-item`	Cancelable event emitted right before the item dismisses itself.
`close`	`stellar-toast-item`	Emitted after the dismiss animation completes and just before the item is removed.

Slots

Slot	Notes
default	Main toast copy, typically a title plus supdocs text.
`icon`	Optional leading visual. Use this when a custom avatar, image, or non-built-in icon should replace the `icon` prop.
`close-icon`	Optional dismiss visual. Use this when custom markup should replace the built-in `close-icon` prop.

Notes

`stellar-toast-item` can render inline for documentation, but in production it is usually created inside a `stellar-toast` stack.
The built-in `icon` and `close-icon` props are for common icon-only cases. Use the named `icon` and `close-icon` slots when you need custom markup such as `stellar-avatar`.
`without-close` removes the button at render time, so the standalone preview and declarative authored markup both reflect it directly.
`duration="0"` keeps the item open until the user dismisses it or the surrounding stack handles `Escape`; positive duration changes now restart the live timer from full progress.