ToastPanel | Tuff Docs

Usage

The dashed tether links the new item to the list it came from; the host supplies all card content.

Loading demo...

Keep tetherLength short, or the tether stops reading as a link to its origin.
Announce an arrival once: set live="off" when the host already announces it.
Compose the card from existing rows such as TxCardItem; this component owns only the arrival posture.
Hide it with open, not v-if: unmounting cuts the leave transition, collapses the tether's box, and makes the layout jump.
Use it for the newest result anchored under a list or panel; use TxToastHost for a transient message with no position.

Name	Type	Default	Description
`open`	`boolean`	`true`	Whether it shows; `false` keeps it in the DOM.
`tether`	`boolean`	`true`	Draws the dashed tether.
`tetherLength`	`number`	`28`	Tether length in px; negatives count as 0.
`side`	`'below' \| 'above'`	`'below'`	Which side of its origin it sits on; only the tether direction changes.
`stack`	`number`	`1`	Slivers peeking out behind, clamped to 0–2.
`ariaLabel`	`string`	`'Latest item'`	Accessible name of the region.
`live`	`'polite' \| 'off'`	`'polite'`	Set `'off'` when the host announces elsewhere; `aria-live` is then omitted.

Name	Description
`default`	The card's contents.
`tether`	Replaces the default dashed tether.

Positioning belongs to the host: the component draws only the tether's direction and never places itself. Put it after its origin element.
The root is role="status" with aria-live="polite" by default, because the panel appears without a user action.
With open false, only a class changes: opacity drops to zero and the panel returns to its travel origin.
The entrance springs on --tx-ease-spring; under reduced motion the travel is dropped and only the fade remains.
The stack slivers are aria-hidden decoration with no content, capped at 2 because a third would show under a pixel of edge.

packages/tuffex/packages/components/src/toast-panel/index.ts