Alert

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

ユーザーへ注意喚起・状態変化を伝える部品です。role="alert" を状態に関わらず固定で付与するため、五つの状態（Info/Success/Warning/Error/Neutral）いずれでもスクリーンリーダーへ通知が届きます。見た目は variant（Subtle/Surface/Solid/Outline/AccentBorder、既定 Subtle）と size（Xs〜Xl、既定 Md）でも調整できます。AccentBorder は淡色背景 + inline-start 側の太いアクセント罫線・角丸なしの構成です。値の変化を伴わない静的な警告表示には Status を、一時的な進捗通知には Progress を検討してください。

shadcn/ui の variant「default」「destructive」は、独自の名称を持ち込まず既存の status/variant 軸の組み合わせで表現します（Neutral + Surface が「default」相当、Error + Outline が「destructive」相当）。shadcn/ui の AlertAction（右上のアクション併記）に相当する構成は、本部品が独自に追加した pre-styled-only レイアウトパート action で表現します。action は root の末尾に置くだけでアクション（button 等）を右側（RTL では左側）へ寄せる表示専用パートで、クリック配線・送信処理は内包しません（呼び出し側が children に渡すノードへ配線します）。

Demo

status（info / success / warning / error / neutral）・variant（subtle / surface / solid / outline）・size（xs〜xl）で見た目が切り替わる通知領域。root / indicator / content / title / description / action の slot 構成です。

Info

新しいバージョンが利用可能です。

Success

ビルドが完了しました。

Warning

依存クレート数が上限に近づいています。

Error

リンク切れを検出したため書き出しを中止しました。

Neutral

中立な状態の通知です。

Subtle

Surface

Solid

Outline

AccentBorder

shadcn default 相当

Neutral + Surface の組み合わせです。

shadcn destructive 相当

Error + Outline の組み合わせです。

title のみ

description のみ

Update available

A new version is ready to install.

Features

AlertStatus（Info/Success/Warning/Error/Neutral、crates/pre-styled-ui/src/alert.rs）で 5 種の状態色を切り替える（イシュー #1553）
AlertVariant（Subtle/Surface/Solid/Outline/AccentBorder、既定 Subtle）で見た目のトーンを切り替える（イシュー #1553、AccentBorder はイシュー #3131）
size（Xs〜Xl、既定 Md）でパディング・フォントサイズ・indicator サイズを切り替える（イシュー #1553）
root に WAI-ARIA live region の role="alert" を状態に関わらず固定付与する（alert.rs）
indicator/content/title/description/action の 5 パーツで見出し・本文・アクションを構造化できる（action は pre-styled-only レイアウトパート、イシュー #2043）

Anatomy

root
  indicator
  content
    title
    description
  action

API Reference

Arguments

Name	Type	Default	Description
`status`	`AlertStatus`	`Info`	見た目の状態色（alert.rs、#[default] は Info）。
`variant`	`AlertVariant`	`Subtle`	見た目のトーン（Subtle/Surface/Solid/Outline/AccentBorder、イシュー #1553・#3131）。
`size`	`Size`	`Md`	サイズ（Xs〜Xl、イシュー #1553）。

CSS Variables

Variable	Default
`--fandhe-alert-font-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-alert-gap`	`var(--fandhe-space-3)`
`--fandhe-alert-indicator-size`	`var(--fandhe-font-font-size-xl)`
`--fandhe-alert-padding`	`var(--fandhe-space-4)`

Examples

Warning

Warning 状態の Alert を indicator + title/description で組み立てた例です。

Heads up

Something needs attention

Default (shadcn 相当)

shadcn/ui の variant "default" に相当する Neutral + Surface の組み合わせです（イシュー #2043）。

shadcn default 相当

Neutral + Surface の組み合わせです

Destructive (shadcn 相当)

shadcn/ui の variant "destructive" に相当する Error + Outline の組み合わせです（イシュー #2043）。

shadcn destructive 相当

Error + Outline の組み合わせです

Title only

title のみを content に含めた最小構成です（イシュー #2043）。

title のみ

Description only

description のみを content に含めた最小構成です（イシュー #2043）。

description のみ

With action

shadcn/ui の AlertAction 相当を、pre-styled-only レイアウトパート action（root 末尾の button 併記）で表現した例です（イシュー #2043）。

Update available

A new version is ready to install.

Accent border

淡色背景 + inline-start 側の太いアクセント罫線・角丸なしの AccentBorder variant です（イシュー #3131）。

Accent border

inline-start 側に太いアクセント罫線が付きます

Accessibility

WAI-ARIA

Attribute	Description
role="alert"	WAI-ARIA live region。status の値に関わらず固定で付与される（alert.rs）。