Alert
Alertは、ユーザーに重要な情報やフィードバックを伝えるための通知コンポーネントです。ステータスに応じたアイコンと色を自動的に適用し、情報、成功、警告、エラーの4種類のメッセージを表現できます。
Playground
Heads up!
You can add components to your app using the CLI.
<Alert>
<Alert.Title>Heads up!</Alert.Title>
<Alert.Description>
You can add components to your app using the CLI.
</Alert.Description>
</Alert>Variants
Alert
Alert
Alert
Sizes
smdefaultlg| Size | パディング | タイトル | 説明 | アイコン | プレビュー |
|---|---|---|---|---|---|
sm | 12px | 13px | 12px | 16px | TitleDescription text |
default | 16px | 14px | 13px | 18px | TitleDescription text |
lg | 20px | 16px | 14px | 20px | TitleDescription text |
Colors
Information
A new software update is available. See what's new in version 3.0.
Success
Your changes have been saved successfully.
Warning
Your trial period will expire in 3 days.
Error
There was a problem processing your request.
Features
Closable
closableを有効にすると閉じるボタンが表示されます。onCloseでコールバックを受け取れます。
Saved!
Your changes have been saved.
<Alert color="success" closable onClose={() => setVisible(false)}>
<Alert.Title>Saved!</Alert.Title>
<Alert.Description>Your changes have been saved.</Alert.Description>
</Alert>Custom Icon
iconでカスタムアイコンを設定、hideIconでアイコンを非表示にできます。
New feature available!
Check out the latest updates.
Simple message without icon
This alert has no icon.
{/* Custom icon */}
<Alert icon={<Rocket className="icon-md" />}>
<Alert.Title>New feature!</Alert.Title>
</Alert>
{/* No icon */}
<Alert hideIcon>
<Alert.Title>Simple message</Alert.Title>
</Alert>Variant × Color Matrix
3つのバリアントと4つのカラーの全12パターン。
default
Info
This is a default info alert.
Success
This is a default success alert.
Warning
This is a default warning alert.
Error
This is a default error alert.
outline
Info
This is a outline info alert.
Success
This is a outline success alert.
Warning
This is a outline warning alert.
Error
This is a outline error alert.
filled
Info
This is a filled info alert.
Success
This is a filled success alert.
Warning
This is a filled warning alert.
Error
This is a filled error alert.
API
Component Structure
Alert— Pure React.Titleアラートのタイトル（h5）.Description説明テキスト（p）Props
Alert (Root)
variant"default""default" | "outline" | "filled"外観バリアント（default: ティント背景、outline: ボーダー、filled: ソリッド）
color"info""info" | "success" | "warning" | "error"セマンティックカラー（アイコン・色・ARIAロールを自動決定）
size"default""sm" | "default" | "lg"サイズ（パディング・フォント・アイコンを一括制御）
closablefalseboolean閉じるボタンの表示
onCloseundefined() => void閉じるボタンのコールバック
closeIconundefinedReactNodeカスタム閉じるアイコン
iconauto (by color)ReactNodeカスタムステータスアイコン
hideIconfalsebooleanアイコンを非表示にする
radius"lg""none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"角丸
| Name | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "filled" | "default" | 外観バリアント（default: ティント背景、outline: ボーダー、filled: ソリッド） |
color | "info" | "success" | "warning" | "error" | "info" | セマンティックカラー（アイコン・色・ARIAロールを自動決定） |
size | "sm" | "default" | "lg" | "default" | サイズ（パディング・フォント・アイコンを一括制御） |
closable | boolean | false | 閉じるボタンの表示 |
onClose | () => void | undefined | 閉じるボタンのコールバック |
closeIcon | ReactNode | undefined | カスタム閉じるアイコン |
icon | ReactNode | auto (by color) | カスタムステータスアイコン |
hideIcon | boolean | false | アイコンを非表示にする |
radius | "none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "lg" | 角丸 |
Alert.Title
childrenundefinedReactNodeタイトルテキスト
classNameundefinedstring追加のCSSクラス
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | undefined | タイトルテキスト |
className | string | undefined | 追加のCSSクラス |
Alert.Description
childrenundefinedReactNode説明テキスト
classNameundefinedstring追加のCSSクラス
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | undefined | 説明テキスト |
className | string | undefined | 追加のCSSクラス |
Anatomy
Best Practices
推奨
- ✓ステータスに適したcolorを使用する
- ✓タイトルと説明で簡潔にメッセージを伝える
- ✓一時的な通知にはclosableを使用する
避けるべき
- ✕1ページに大量のAlertを表示しない
- ✕重大なエラーにdefaultバリアントを使わない — filledを使用する
- ✕一時的な通知にAlertを使わない — Toastを使用する
- ✕ユーザーの確認が必要な場合にAlertを使わない — Modalを使用する
Alert vs Toast
どちらもユーザーへの通知に使いますが、表示の持続性とインタラクションが異なります。
表示
Alert: ページ内に固定（永続的）
Toast: 一時的に表示され自動で消える
トリガー
Alert: ページロード時・状態変化時
Toast: ユーザーアクション後のフィードバック
コンテンツ
Alert: タイトル＋説明（リッチ）
Toast: 短いメッセージ（1〜2行）
閉じ方
Alert: 手動（closable）or 常時表示
Toast: 自動消去（数秒後）
用途
Alert: システム状態、警告、エラー
Toast: 保存完了、コピー完了など
ARIA
Alert: role="alert" / role="status"
Toast: role="status" + aria-live
| 特徴 | Alert | Toast |
|---|---|---|
| 表示 | ページ内に固定（永続的） | 一時的に表示され自動で消える |
| トリガー | ページロード時・状態変化時 | ユーザーアクション後 |
| コンテンツ | タイトル＋説明（リッチ） | 短いメッセージ |
| 閉じ方 | 手動 or 常時表示 | 自動消去（数秒後） |
| 用途 | システム状態、警告、エラー | 保存完了、コピー完了 |
| ARIA | role="alert" / role="status" | role="status" + aria-live |
使い分けのポイント： Alertはページ内の「状態通知」に使用。ユーザーのアクションに対する一時的なフィードバックにはToastを使用します。
Accessibility
ARIA / WCAG
role="alert"error時に自動付与role="status"info/success/warning時- 閉じるボタンに
aria-label="Close" - 装飾アイコンに
aria-hidden="true"