コンポーネント
Alert
ユーザーの注意を引くためのコールアウトを表示します。
Heads up!
You can add components to your app using the CLI.
使い方
import { Alert, AlertDescription, AlertTitle } from "@murasakijs/ui";<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the CLI.
</AlertDescription>
</Alert>バリアント
variant プロパティで、エラーや警告向けの destructive スタイルに切り替えられます。
Error
Your session has expired. Please log in again.
API リファレンス
Props
| Prop | 型 | デフォルト |
|---|---|---|
variant | "default" | "destructive" | "default" |
Alert・AlertTitle・AlertDescription はいずれも、対応するネイティブ HTML 要素の属性を拡張しています。先頭の <svg> 子要素（lucide-react のアイコンなど）は、CSS によって自動的に左上に配置されます。