アラートAlertBeta
注意を促すためのコールアウトを表示します。
プレビュー
CLIで追加できます
必要なコンポーネントを選んで、プロジェクトへ追加できます。
状態とバリエーション
標準表示
補足や注意を本文から分離して示します。
CLIで追加できます
必要なコンポーネントを選んで、プロジェクトへ追加できます。
props で書く
icon / title / description の props で、compound を組まずに同じアラートを書けます。
交付完了
書類の交付が完了しました。
情報
補足情報や参照先を本文から分けて伝えます。
仕様を確認できます
詳細な仕様は、このページのプロパティ表にまとめています。
完了
完了や保存済みなど、肯定的な結果を伝えます。
保存しました
設定は次回のプレビューから反映されます。
注意
破壊的ではないが、確認してから進める状態に使います。
公開前に確認してください
外部に公開される項目が含まれています。
エラー
操作を止める必要があるエラーや危険な状態に使います。
セッションが切れました
続行するには、もう一度ログインしてください。
タイトルのみ
短い完了通知や一文で足りる注意では、説明文を省略できます。
下書きを保存しました
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| variant | 'default' | 'info' | 'success' | 'warning' | 'destructive' | 'default' | アラートの意味と強さに応じた見た目です。 |
| icon | React.ReactNode | - | 先頭のアイコン（Tabler 等の svg）。位置付き のアイコンスロットに描画されます（compound API で先頭の <svg> 子要素が入る場所と同じ）。装飾扱い。 |
| title | React.ReactNode | - | 簡易タイトル。<AlertTitle>（既定 p・見出し順に入らない）の子要素と同等です。セクション見出しにしたい場合は compound の <AlertTitle as=…> を使います。(#251) |
| description | React.ReactNode | - | 簡易本文。<AlertDescription> の子要素と同等です。 |
| children | React.ReactNode | - | compound での内容（アイコン、AlertTitle、AlertDescription）。icon/title/description の props と併用も可能です。 |
| className | string | - | アラートのラッパーに追加するクラスです。 |
使い方
import { Alert, AlertDescription, AlertTitle } from "@gunjo/ui"
import { IconTerminal2 as Terminal } from "@tabler/icons-react"
export function InstallAlert() {
return (
<Alert>
<Terminal className="h-4 w-4" />
<AlertTitle>CLIで追加できます</AlertTitle>
<AlertDescription>
必要なコンポーネントを選んで、プロジェクトへ追加できます。
</AlertDescription>
</Alert>
)
}設計の判断
- バナーの題は既定で見出しにしない。
AlertTitleは既定でpを描きます。通知バナーの題は文書の見出しの並びに属さないので、そこに見出しを置くと階層が飛びます。節の見出しを本当に持つときだけas="h2"のように渡します。見た目はどちらでも同じです（#251）。 - 種類を色だけに乗せない。
variantを変えると、枠線・淡い背景・文字色・アイコンの色が同時に変わります。アイコンは飾りとして扱い、意味は題と説明の文が持ちます（#303）。 - 資料と食い違っているところ。GUNJO の
Alertはvariantによらず常にrole="alert"を付けます。資料は「role="alert"は読み上げに割り込むので誤りのときだけに使い、他はaria-live="polite"にする」としています。ここは実装のほうを直す向きで、#936 で追っています。
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。