Design SystemComponentsToast

Toast

Installation

import { Toast, toast } from "@olab/components";

Overview

畫面右上角跳出的通知卡：320px 寬，左邊一個 28px 圓形類型圖示，右邊標題與說明，3 秒後自動消失。五種類型：info、announcement、success、warning、error。

可以加一排 Dismiss + 動作按鈕（showFooter）。多則通知會疊在一起。

Interactive Demo

CLICK A TRIGGER — toast renders in the top-right corner

Toast 固定出現在右上角，3 秒後自動消失。

State Matrix

TYPE — static replica (same classes, rendered in place)

info toast
Description text for the info toast.
announcement toast
Description text for the announcement toast.
success toast
Description text for the success toast.
warning toast
Description text for the warning toast.
error toast
Description text for the error toast.

WITH FOOTER · close hover (sim)

info toast
Description text for the info toast.
info toast
Description text for the info toast.

Examples

ALL 5 TYPES WITH DESCRIPTION — click to render (live)

WITH ACTION — showFooter adds Dismiss + action buttons (live)

Spec

PartValueSource class
Card寬 320px，20px 圓角，內距 16px，間距 12pxw-80 rounded-2xl border p-4 gap-3
Card border1pxborder-secondary
Type icon28px 圓形h-7 w-7 rounded-full
info淡底bg-secondary
announcement品牌色，圖示深色bg-brand-solid
success成功色bg-success-solid
warning警告色，圖示深色bg-warning-solid
error錯誤色bg-error-solid
Title / description16px 主要文字 / 14px 次要文字text-bodyL text-primary / text-bodyM text-tertiary
Close button24px，右上各 12pxabsolute top-3 right-3 h-6 w-6 · hover:bg-secondary
Placement / duration右上角，疊放、間距 24px，3 秒top-end · gap 24 · 3000ms

數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/toast.md。

Usage

Do

  • 回報剛剛完成的動作結果：已儲存、下單成功、送出失敗。
  • 標題一句講結果，說明補充下一步；需要使用者動作時才開 showFooter。
  • 依結果選類型：成功 success、出錯 error、需要注意 warning、產品公告 announcement。

Don't

  • 不要把需要使用者決定的事只放在 Toast；它 3 秒就消失，請用 Modal。
  • 不要一次連發好幾則；合併成一則。
  • 不要用 Toast 顯示一直有效的狀態（例如網路斷線）；那應該留在頁面上。