CodeConnect Design System

Toast

一時的な通知メッセージを表示するコンポーネント。ユーザーの操作結果やシステムイベントを通知します。

基本的な使い方

ToastはRadix UIベースで、ToastProviderとuseToastフックを使用して実装します。

import { ToastProvider, ToastViewport, ToastContextProvider, useToast } from '@codeconnect-llc/design-system'


// アプリのルートでToastContextProviderをセットアップ
function App() {
  return (
    <ToastContextProvider>
      <ToastProvider>
        <YourApp />
        <ToastViewport />
      </ToastProvider>
    </ToastContextProvider>
  )
}


// コンポーネント内でuseToastフックを使用
function MyComponent() {
  const { toast } = useToast()


  const showToast = () => {
    toast({
      variant: 'info',
      title: 'お知らせ',
      description: 'これは通知メッセージです',
    })
  }


  return <Button onClick={showToast}>通知を表示</Button>
}

バリアント

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

Info

const { toast } = useToast()


toast({
  variant: 'info',
  title: '情報',
  description: '新機能が追加されました',
})

Success

const { toast } = useToast()


toast({
  variant: 'success',
  title: '成功',
  description: 'データが正常に保存されました',
})

Warning

const { toast } = useToast()


toast({
  variant: 'warning',
  title: '警告',
  description: 'この操作は元に戻せません',
})

Error

const { toast } = useToast()


toast({
  variant: 'error',
  title: 'エラー',
  description: '処理に失敗しました',
})

タイトルのみ

descriptionを省略すると、タイトルのみのコンパクトな通知になります。

const { toast } = useToast()


toast({
  variant: 'success',
  title: '保存しました',
})

自動非表示の制御

durationプロップで表示時間（ミリ秒）を制御できます。デフォルトは5000ms（5秒）です。

const { toast } = useToast()


// 3秒後に自動で消える
toast({
  variant: 'info',
  title: 'クリップボードにコピーしました',
  duration: 3000,
})


// 自動で消えない（duration: Infinityまたは0を指定）
toast({
  variant: 'warning',
  title: '重要な通知',
  description: '手動で閉じる必要があります',
  duration: Infinity,
})

プログラムで閉じる

dismiss関数を使用して、特定のトーストを閉じることができます。

const { toast, dismiss } = useToast()


const toastId = toast({
  variant: 'info',
  title: '処理中...',
  duration: Infinity,
})


// 処理完了後に閉じる
setTimeout(() => {
  dismiss(toastId)
}, 3000)

useToast API

メソッド型説明
toast(props: ToastProps) => stringトーストを表示し、IDを返す
dismiss(toastId: string) => void指定したトーストを閉じる
remove(toastId: string) => void指定したトーストをDOMから削除
toastsToastItem[]現在表示中のトースト一覧

Toast Props

PropTypeDefaultDescription
variant'info' | 'success' | 'warning' | 'error''info'トーストの種類
titlestring-トーストのタイトル
descriptionstring-トーストの説明文
durationnumber5000表示時間（ミリ秒）

自動アイコン表示

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

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

アクセシビリティ

  • 自動非表示: デフォルトで5秒後に消えるため、ユーザーの操作を妨げない
  • 手動クローズ: 閉じるボタンで手動で消すことも可能
  • スワイプジェスチャー: モバイルでスワイプして閉じることができる
  • 位置: 画面右下（モバイルは上部）に表示され、視線の邪魔にならない

使用例

フォーム送信後の通知:

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


export function ContactForm() {
  const { toast } = useToast()
  const [isSubmitting, setIsSubmitting] = useState(false)


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


    try {
      await submitForm()
      toast({
        variant: 'success',
        title: '送信完了',
        description: 'お問い合わせを受け付けました。1営業日以内に返信いたします。',
      })
    } catch (error) {
      toast({
        variant: 'error',
        title: '送信失敗',
        description: 'エラーが発生しました。もう一度お試しください。',
      })
    } finally {
      setIsSubmitting(false)
    }
  }


  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <Button type="submit" disabled={isSubmitting}>
        送信
      </Button>
    </form>
  )
}

複数の操作を順次通知:

import { useToast } from '@codeconnect-llc/design-system'


export function DataProcessor() {
  const { toast } = useToast()


  const processData = async () => {
    // ステップ1
    toast({
      variant: 'info',
      title: 'データを読み込み中...',
      duration: 2000,
    })
    await loadData()


    // ステップ2
    toast({
      variant: 'info',
      title: 'データを処理中...',
      duration: 2000,
    })
    await processData()


    // 完了
    toast({
      variant: 'success',
      title: '処理完了',
      description: 'すべてのデータが正常に処理されました',
    })
  }


  return <Button onClick={processData}>データを処理</Button>
}