CSS: callout ​

div[class~="instui-callout"] — 內嵌資訊提示，用於短暫的提醒或註記。

✅ 在以下情況使用 Callout：

  • 需要在行內突顯重要資訊或提醒

  • 訊息相對簡短（句子到短段落）

  • 提示應吸引注意但不打斷主要流程 🚫 以下情況不應使用 Callout：

  • 訊息需要互動或多步操作 — 使用 Modal 或 Alert Dialog

  • 內容是頁面的主要焦點 — 改用 Card 或 Hero 佈局

無障礙 ​

  • 確保已正確套用 alert role (role="alert" 或 role="status")
  • 使用符合 WCAG AA 標準的語義色彩對比
  • 不要僅依賴顏色來傳達意義

使用方法 ​

css
@import "@pantoken/plugin-layouts/layouts.css";

範例 ​

插槽 ​

插槽說明
message提示訊息內容

部件 ​

部件說明
.instui-content文字內容的容器。
.instui-icon內容左側的選用圖示。

偽元素 ​

偽元素說明
::before—

狀態 ​

狀態說明
:optional—

已使用的代幣 ​

Token型別值
--instui-color-info-background——
--instui-color-info-border——
--instui-color-info-text——
--instui-radius-medium——
--instui-size-small<length>—
--instui-space-medium——
--instui-space-small——

相關 ​