Callout

fandhe-frontend-pre-styled-ui の callout mod が提供するスタイル済み Callout 部品です。

本文フロー中に置く補足情報を強調表示する静的な部品です。Alert と異なり role="alert"（WAI-ARIA live region）を付与しないため、支援技術への割り込み通知を発生させません。強調の意味づけは variant（soft/surface/outline）と colorPalette の組み合わせのみで表現し、緊急度の意味論は持ちません。

size（xs〜xl、既定 md）は Radix Themes Callout の size 1〜3 に対応し、padding・gap・角丸・文字サイズが連動して変化します。配色はセマンティック色（accent/info/success/warning/danger/neutral）の淡色トークンを背景に、本文サイズでも 4.5:1 以上の WCAG コントラストを満たす文字色を組み合わせます。

Demo

本文フロー中に置く補足情報。alert と異なり live region ではなく role を付与しません。variant（soft / surface / outline）・colorPalette・size（xs〜xl、padding / gap / 角丸 / 文字サイズが連動）を組み合わせます。

Soft variant の補足情報です（本文中の強調表示）。

Surface variant の補足情報です（本文中の強調表示）。

Outline variant の補足情報です（本文中の強調表示）。

Accent

Info

Success

Warning

Danger

Neutral

Features

CalloutVariant（Soft/Surface/Outline、crates/pre-styled-ui/src/callout.rs:68-76）で見た目を切り替える
colorPalette 軸（callout.rs:94-101）でセマンティック色を選択する
size（xs〜xl、callout.rs:94-101）で padding / gap / 角丸 / 文字サイズが root の --fandhe-callout-* custom property を通じて連動する（イシュー #1556）
root/icon/text の 3 パーツで補足情報を構造化できる（callout.rs 全文参照）
alert と異なり role を一切付与しない静的な補足表示部品（callout.rs:1-18 module doc）

Anatomy

root
  icon
  text

API Reference

Arguments

Name	Type	Default	Description
`variant`	`CalloutVariant`	`Soft`	見た目（callout.rs:68-76、#[default] は Soft）。
`size`	`Size`	`Md`	サイズ（callout.rs:94-101）。padding / gap / 角丸 / 文字サイズが連動する（root の `--fandhe-callout-*`、イシュー #1556）。
`palette`	`ColorPalette`	`Accent`	colorPalette 軸（callout.rs:94-101）。

CSS Variables

Variable	Default
`--fandhe-callout-font-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-callout-gap`	`var(--fandhe-space-3)`
`--fandhe-callout-padding`	`var(--fandhe-space-4)`
`--fandhe-callout-radius`	`var(--fandhe-radius-lg)`

Examples

Surface

Surface variant の Callout を icon + text で組み立てた例です。

Heads up: this is supplementary info

Accessibility

WAI-ARIA

Attribute	Description
(該当なし)	固有の role/aria-* を出力しない。alert と異なり live region ではないため支援技術へ割り込み通知をしない（callout.rs module doc 参照）。