CSS: callout ​

div[class~="instui-callout"] — 短いリマインダーやメモのためのインライン情報アラート。

✅ Callout を使用する場合:

  • 重要な情報やリマインダーをインラインで強調する必要がある

  • メッセージが比較的短い（1文〜短い段落）

  • アラートがメインの流れを中断せずに注意を引くべきである 🚫 Callout を使用しない場合:

  • メッセージがインタラクションや複数の操作を必要とする場合 — Modal または Alert Dialog を使用してください

  • コンテンツ自体がページの主要な焦点である場合 — 代わりに Card または Hero レイアウトを使用してください

アクセシビリティ ​

  • alert ロールが正しく適用されていることを確認する（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——

関連項目 ​