提示區塊

表單頂部、設定頁與儀表板常用的提示區塊。variant 有 default、info、success、warning、destructive 五種，各自對應左側圖示、3px 色帶與配色；可放標題、說明與操作按鈕。設為 dismissible 時右上角出現關閉鈕——關閉不是瞬間消失，而是先淡出、同時把高度與外距收合到 0，下方內容平順上移補位，收合完成後才卸載並呼叫 onDismiss。開啟 live 後，標題或說明內容變更時圖示會輕彈一次，提醒使用者這則提示剛更新。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<AlertCallout/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/alert-callout.json

使用

import { AlertCallout } from "@/components/ui/alert-callout";

<AlertCallout
  className="mb-3"
  variant="warning"
  title="你的付款方式將於 11 月 30 日到期"
  description="到期後將無法自動續訂，請先更新卡片資訊。"
  action={<button type="button">更新付款方式</button>}
/>

<AlertCallout
  className="mb-3"
  variant="success"
  title="變更已儲存"
  description={`已於 ${savedAt} 儲存`}
  dismissible
  live
  onDismiss={() => console.log("已關閉")}
/>

Props

細節

• 預設圖示（lucide）：default 與 info 為 Info、success 為 CircleCheck、warning 為 TriangleAlert、destructive 為 CircleX。
• 色帶顏色可用 CSS 變數 --wb-alert-callout-accent 覆寫（例如 className="[--wb-alert-callout-accent:#7c3aed]"），未設定時依 variant 使用對應色階。
• 根元素會寫入 --wb-alert-callout-duration 與 --wb-alert-callout-collapse-duration，關閉鈕的 hover 色彩過渡使用前者。
• 收合動畫：opacity 在前 1/3 時間內淡出，height、marginTop、marginBottom 同時以 easeInOut 收合到 0；多則提示堆疊時，請用每則提示自己的 className="mb-3" 拉開間距（而非父層 gap），間距才會跟著收合、不會在卸載時跳一下。
• overflow: hidden 只在收合期間開啟，平時不會裁掉關閉鈕的焦點框或你加上的陰影。
• live 比對的是標題與說明實際渲染出的文字，傳入新的 JSX 但文字沒變時不會彈跳。

可及性

• destructive 與 warning 使用 role="alert"（立即朗讀），其他變體使用 role="status"；以 aria-labelledby／aria-describedby 關聯標題與說明
• 標題預設以 h5 渲染，可用 titleAs 改成符合頁面層級的元素或 div
• 關閉鈕為 type="button"、aria-label="關閉提示"，有可見的 focus-visible 外框
• 關閉時若焦點在這則提示內，焦點會移到下一則提示的關閉鈕；沒有下一則就移到上一則，再沒有就移到父容器，避免焦點遺失；退場期間設為 inert，無法再被點擊或 Tab 走到
• 使用者系統開啟「減少動態效果」時，進場只淡入（不位移）、關閉以 100ms 淡出直接消失（不收合），live 也不彈跳