Alert

重要な情報をユーザーに伝えるアラートメッセージコンポーネント。4つのバリアントと自動アイコン表示機能を提供します。

基本的な使い方

Preview

バリアント

Alertは4つのバリアントを提供します。各バリアントに対応するアイコンが自動的に表示されます。

Info

Preview

Success

Preview

Warning

Preview

Error

Preview

タイトル付きアラート

title propでタイトルを追加できます。

Preview

閉じるボタン付きアラート

dismissible propを true にすると、閉じるボタンが表示されます。

Preview

リッチコンテンツ

Alert内に複雑なコンテンツを含めることができます。

Preview

Props

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	アラートの種類
`title`	`string`	-	アラートのタイトル
`dismissible`	`boolean`	`false`	閉じるボタンを表示
`onDismiss`	`() => void`	-	閉じるボタンクリック時のコールバック
`className`	`string`	-	追加のCSSクラス
`children`	`ReactNode`	-	アラートの内容

自動アイコン表示

各バリアントに対応するアイコンが自動的に表示されます：

Info: 情報アイコン（i）
Success: チェックマークアイコン
Warning: 警告三角アイコン
Error: エラーXアイコン

アクセシビリティ

視覚的な区別: 色とアイコンで情報の種類を明確に示す
明確なメッセージ: ユーザーが取るべきアクションを明示
キーボード操作: 閉じるボタンはキーボードでアクセス可能

使用例

フォーム送信後のフィードバック表示:

import { Alert } from '@codeconnect-llc/design-system'
import { useState } from 'react'

export function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle')

  const handleSubmit = async (e) => {
    e.preventDefault()

    try {
      // API call
      await submitForm()
      setStatus('success')
    } catch (error) {
      setStatus('error')
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {status === 'success' && (
        <Alert
          variant="success"
          title="送信完了"
          dismissible
          onDismiss={() => setStatus('idle')}
        >
          お問い合わせを受け付けました。
          1営業日以内に返信いたします。
        </Alert>
      )}

      {status === 'error' && (
        <Alert
          variant="error"
          title="送信失敗"
          dismissible
          onDismiss={() => setStatus('idle')}
        >
          エラーが発生しました。
          もう一度お試しいただくか、サポートにお問い合わせください。
        </Alert>
      )}

      {/* Form fields */}
    </form>
  )
}