Alert
意味のあるタイトルと説明、任意のアクションを持つ永続的なステータスメッセージです。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
variant | neutral, info, success, warning, danger | neutral |
role | status、alert などのネイティブ div ロール | なし |
| パーツ | Root、Title、Description、Actions | 複合 API |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/alert.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRAlert } from '@tinyrack/ui/components/alert';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
状態のバリアント パーマリンク
すべてのセマンティックな状態色を縦に並べて確認できます。
通知ロールの使い分け パーマリンク
重要度の低い更新には `status` を、新しく発生した緊急のエラーだけに `alert` を使用します。ページの読み込み時から存在するコンテンツには、ライブリージョンのロールを設定しません。
文脈に応じた見出しと折り返しアクション パーマリンク
ページの文脈に応じて見出しレベルを選びます。アクションはアラート内で折り返され、ページにはみ出しません。
API
パーツと既定値
| パーツ | 固有のオプションまたは既定値 | 動作 |
|---|---|---|
Root | variant="neutral" | div をレンダリングし、選択したステータス表現を適用します。 |
Title | <div /> | アラートの見出し内容をレンダリングします。 |
Description | <p /> | 補足内容をレンダリングします。 |
Actions | <div /> | 任意のコントロールをまとめ、折り返しを許可します。 |
合成とアクセシビリティ
Root と Actions はネイティブ div プロパティと React 19 の ref を転送します。Title と Description は、既定の要素が周囲のセマンティクスに合わない場合に Base UI の render コントラクトを利用できます。通知の緊急度はアプリケーションの文脈で決まるため、Root はライブリージョンのロールを自動付与しません。status、alert、ロールなしのいずれかを意図に合わせて選んでください。