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>

Props

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

AlertとSonnerの使い分け

用途推奨
一時的な通知（保存完了など）Sonner
ページ内に残すエラー表示Alert
フォームのバリデーションエラーAlert
重要な注意事項Alert

Previous

Accordion

Next

AlertDialog

On this page