Swipe Toast
A toast that burns down its remaining time and can be swiped away or undone.
File archivedMoved to the studio archive
Hover to pause · swipe down to dismiss · Escape also closes
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 useState,7 type CSSProperties,8 type HTMLAttributes,9 type PointerEvent,10 type ReactNode,11} from "react";12import { Archive } from "lucide-react";13 14export type SwipeToastCloseReason =15 "timeout" | "swipe" | "action" | "escape" | "programmatic";16 17export type SwipeToastProps = Omit<18 HTMLAttributes<HTMLDivElement>,19 "children" | "onChange"20> & {21 /** First line of the toast. */22 title: ReactNode;23 /** Dim second line; omitted when empty. */24 description?: ReactNode;25 /** Optional inline action. */26 actionLabel?: string;27 /** Called when the action is pressed, before the toast closes. */28 onAction?: () => void;