Alert
ユーザーへの通知やフィードバックを表示するコンポーネント。
Installation
npx shadcn@latest add https://kasumi-ui.vercel.app/r/alert.jsonUsage
お知らせ
システムメンテナンスを予定しています。
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
<Alert>
<AlertTitle>お知らせ</AlertTitle>
<AlertDescription>
システムメンテナンスを予定しています。
</AlertDescription>
</Alert>Variant
Default
デフォルトのアラートです。
Success
操作が正常に完了しました。
Info
参考情報をお知らせします。
Warning
注意が必要な状態です。
Error
エラーが発生しました。
<Alert variant="default">
<AlertTitle>Default</AlertTitle>
<AlertDescription>デフォルトのアラートです。</AlertDescription>
</Alert>
<Alert variant="success">
<AlertTitle>Success</AlertTitle>
<AlertDescription>操作が正常に完了しました。</AlertDescription>
</Alert>
<Alert variant="info">
<AlertTitle>Info</AlertTitle>
<AlertDescription>参考情報をお知らせします。</AlertDescription>
</Alert>
<Alert variant="warning">
<AlertTitle>Warning</AlertTitle>
<AlertDescription>注意が必要な状態です。</AlertDescription>
</Alert>
<Alert variant="error">
<AlertTitle>Error</AlertTitle>
<AlertDescription>エラーが発生しました。</AlertDescription>
</Alert>Title Only
タイトルだけのアラートも使えます。
<Alert variant="info">
<AlertTitle>タイトルだけのアラートも使えます。</AlertTitle>
</Alert>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "success" | "info" | "warning" | "error" | "default" | アラートのスタイルバリエーション |