Caroa UI

Alert

重要な情報を表示するアラートコンポーネント。

インポート

import { Alert, AlertTitle, AlertDescription } from '@caroainc/ui-components'

基本的な使い方

Loading...
<Alert>
  <AlertTitle>お知らせ</AlertTitle>
  <AlertDescription>
    重要なお知らせの内容がここに入ります。
  </AlertDescription>
</Alert>

バリアント

Loading...
<Alert>
  <AlertTitle>デフォルト</AlertTitle>
  <AlertDescription>デフォルトのアラートです。</AlertDescription>
</Alert>
 
<Alert variant="destructive">
  <AlertTitle>エラー</AlertTitle>
  <AlertDescription>エラーが発生しました。</AlertDescription>
</Alert>

アイコン付きアラート

Loading...
<Alert>
  <Icon name="Info" size="sm" />
  <AlertTitle>お知らせ</AlertTitle>
  <AlertDescription>システムメンテナンスのお知らせです。</AlertDescription>
</Alert>
 
<Alert variant="destructive">
  <Icon name="AlertCircle" size="sm" />
  <AlertTitle>エラー</AlertTitle>
  <AlertDescription>入力内容に問題があります。</AlertDescription>
</Alert>

セマンティックカラーを使ったアラート

カスタムクラスでセマンティックカラーを適用できます。

Loading...
{/* 成功アラート */}
<Alert className="border-success/50 bg-success-light text-success [&>svg]:text-success">
  <Icon name="CheckCircle" size="sm" />
  <AlertTitle>成功</AlertTitle>
  <AlertDescription>変更が正常に保存されました。</AlertDescription>
</Alert>
 
{/* 警告アラート */}
<Alert className="border-warning/50 bg-warning-light text-warning [&>svg]:text-warning">
  <Icon name="AlertTriangle" size="sm" />
  <AlertTitle>警告</AlertTitle>
  <AlertDescription>この操作は取り消せません。</AlertDescription>
</Alert>
 
{/* 情報アラート */}
<Alert className="border-info/50 bg-info-light text-info [&>svg]:text-info">
  <Icon name="Info" size="sm" />
  <AlertTitle>情報</AlertTitle>
  <AlertDescription>新機能が追加されました。</AlertDescription>
</Alert>

実際の使用例

フォーム送信後のメッセージ

Loading...

APIエラー

Loading...

注意事項の表示

Loading...

Props

PropTypeDefaultDescription
variant'default' | 'destructive''default'アラートのスタイルバリアント

On this page