Alert

ユーザーへの通知やフィードバックを表示するコンポーネント。

Installation

npx shadcn@latest add https://kasumi-ui.vercel.app/r/alert.json

Usage

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

<Alert>
<AlertTitle>お知らせ</AlertTitle>
<AlertDescription>
  システムメンテナンスを予定しています。
</AlertDescription>
</Alert>

Variant

<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

PropTypeDefaultDescription
variant"default" | "success" | "info" | "warning" | "error""default"アラートのスタイルバリエーション