復原快餐條
帶倒數進度環的復原提示條，時間到自動確認動作。
執行破壞性動作後從底部彈出的快餐條，內含訊息、復原按鈕與 SVG 環形倒數（預設五秒）：按下復原即取消並回報 onUndo，倒數歸零則觸發 onCommit 讓動作正式生效；滑鼠懸停或鍵盤聚焦時倒數自動暫停。可用受控 props 直接串接，或以 useUndoSnackbar 取得現成的狀態管理。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
5000
<UndoSnackbar />
安裝
npx shadcn@latest add https://webberui.com/r/undo-snackbar.json或在 components.json 設定 registries 後，改用 @webberui/undo-snackbar 安裝。
安裝依賴後，從 registry JSON（/r/undo-snackbar.json 的 files[0].content）複製 undo-snackbar.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { UndoSnackbar, useUndoSnackbar } from "@/components/ui/undo-snackbar";
function Inbox() {
const { show, snackbarProps } = useUndoSnackbar({ duration: 5000 });
const handleDelete = (item: Item) => {
hideItem(item.id); // 先在畫面上樂觀移除
show(`已刪除「${item.title}」`, {
onUndo: () => restoreItem(item.id), // 五秒內按復原 → 還原
onCommit: () => permanentlyDelete(item.id), // 逾時 → 正式刪除
});
};
return (
<>
{/* ...清單... */}
<UndoSnackbar {...snackbarProps} />
</>
);
}也可以不使用 hook，改以受控 props 自行管理 open 狀態，並在 onUndo / onCommit 中將其關閉。
Props
UndoSnackbar
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
open | boolean | — | 是否顯示快餐條（受控），請在 onUndo / onCommit 中關閉 |
message | string | — | 快餐條訊息文字 |
duration | number | 5000 | 倒數總時長（毫秒），歸零時觸發 onCommit |
undoLabel | string | "復原" | 復原按鈕的文字 |
onUndo | () => void | — | 按下復原時呼叫：取消動作並關閉 |
onCommit | () => void | — | 倒數結束時呼叫：動作正式生效 |
resetKey | number | string | — | 連續顯示同一訊息時，變更此值可重新開始倒數 |
positioning | "fixed" | "absolute" | "fixed" | 貼齊視窗底部或最近的定位祖先 |
className | string | — | 透傳到快餐條面板 |
useUndoSnackbar
| 項目 | 型別 | 說明 |
|---|---|---|
options.duration | number | 倒數總時長（毫秒），預設 5000 |
options.undoLabel | string | 復原按鈕文字 |
show(message, handlers?) | function | 顯示快餐條並登記 onUndo / onCommit；若已有待定動作會先讓它立即生效 |
close() | function | 靜默關閉，不觸發任何回呼 |
snackbarProps | UndoSnackbarProps | 直接展開到 <UndoSnackbar {...snackbarProps} /> |
可及性
- 快餐條使用
role="status"與aria-live="polite"，出現時由螢幕閱讀器自動朗讀訊息 - 滑鼠懸停或鍵盤聚焦（Tab 到復原按鈕）時倒數暫停，離開後才繼續，確保有足夠時間反應
- 復原為原生
<button>，完整支援鍵盤操作與focus-visible焦點框 - 環形倒數與剩餘秒數屬視覺輔助，對輔助科技隱藏（
aria-hidden） - 使用者系統開啟「減少動態效果」時，進退場改為純淡入淡出，不做位移與彈簧動畫