Swipe Toast

Single toast that rises through its bottom edge, swipes down to dismiss on a flick or a distance, and burns a thin fuse for exactly its remaining time; hover pauses it and an inline mode keeps it inside any container.

Default

Drag a toast down to dismiss it, or hover it to freeze the fuse. Show a few at once to see the inline stack collapse.

Customize

TitleDescriptionAction Label

Background

Text

Fuse

Width356px

Radius12px

Slide400ms

Settle Bounce0.2

Swipe Distance40px

Duration4000ms

Fuse

Pause On HoverClose ButtonInline

API Reference

SwipeToast

Prop	Type	Default	Description
`title`	`string`	`'File archived'`	The first line.
`description`	`string`	`''`	The dimmer second line. Empty hides it.
`actionLabel`	`string`	`''`	The inverted button. Empty hides it.
`open`	`boolean`	`true`	Flip to false to close from outside. True again re-enters.
`background`	`string`	`'#27272a'`	The card surface, and the action text.
`color`	`string`	`'#f5f5f5'`	Ink: title, description at 66% and the action fill.
`fuseColor`	`string`	`'#f5a524'`	The burning line.
`width`	`number`	`356`	Card width in pixels, capped at the parent when inline.
`radius`	`number`	`12`	Corner radius in pixels.
`slideMs`	`number`	`400`	How long the rise and the drop take.
`settleBounce`	`number`	`0.2`	Overshoot of the return after an abandoned swipe. 0 stops dead.
`swipeDistance`	`number`	`40`	How far a slow drag must go before release dismisses. A flick always does.
`duration`	`number`	`4000`	Milliseconds until it closes itself. Changing it re-arms the fuse. 0 keeps it until dismissed.
`fuse`	`'bottom' \| 'top' \| 'none'`	`'bottom'`	Which edge the line burns along. None keeps the timer but shows nothing.
`pauseOnHover`	`boolean`	`true`	Hovering freezes the line and the timer.
`closeButton`	`boolean`	`false`	Adds a cross at the end of the row.
`inline`	`boolean`	`false`	In flow inside the parent instead of fixed to the bottom-right of the viewport.
`dismissible`	`boolean`	`true`	Off removes the swipe and Escape.

Event	Description
`close`	Emitted after the exit, and after the inline slot has collapsed. The reason is timeout, swipe, action, close, escape or programmatic.
`action`	Emitted when the action is pressed, before the close.

Slot	Description
`icon`	An 18px icon before the text.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Tab`	Focuses the toast, which also pauses the fuse.
`Escape`	Dismisses the toast immediately.

The toast is a polite status region. Focus pauses the fuse and so does a hidden tab.
With prefers-reduced-motion the toast fades in and out without sliding.

Swipe Row Tear Ticket