ns-ui

Toast Undo Fuse

Undo toast whose remaining lifetime is a literal fuse — a hairline along the bottom edge burns right-to-left with an ember at the front, answering "when does this go away" without a numeric countdown.

Use when Reach for toast-undo-fuse when the job is a single timed, undo-able notification and the timer itself should read as physical rather than numeric — the border is the countdown, hover or focus visibly pinches it to a pause, and Undo reverses the burn instead of just canceling a number. It shares the "toast" role with toast-gravity-stack, which is the pick instead when the job is a multi-toast feed with gravity, stacking and severity sorting — toast-gravity-stack's individual cards do not carry their own depleting timer chrome the way toast-undo-fuse's does.

Install

npx shadcn add https://design.helpmarq.com/r/toast-undo-fuse.json
  • toast
  • notification
  • undo
  • timer
  • svg
  • spring
  • micro-interaction
  • feedback

ns-ui / toast-undo-fuse

INBOX

  • Q3 planning notes

    Shared doc · edited 2h ago

  • Invoice #4021

    Paid · $1,240.00

  • Design review thread

    12 replies · unread

"Q3 planning notes" archived

Auto-dismisses in 6s unless undone.

archived on load — hover or Tab to pause

Props

PropTypeDefaultDescription
messagestring—The undo-able message, e.g. "Message archived". Required.
actionLabel?string—Label on the action button. Default "Undo".
duration?number—Total fuse life in ms before it auto-dismisses. Default 6000.
onUndo?() => void—Fires once the reverse-burn and exit finish after Undo is pressed.
onDismiss?() => void—Fires once the exit finishes after the fuse burns out, or Escape.
className?string——
Back to the catalog