Sonner

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

インポート

import { Toaster, toast } from '@caroainc/ui-components/client'

セットアップ

アプリケーションのルートレイアウトに Toaster を配置します。

// app/layout.tsx
import { Toaster } from '@caroainc/ui-components/client'
 
export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

基本的な使い方

import { toast } from '@caroainc/ui-components/client'
 
function MyComponent() {
  return (
    <Button onClick={() => toast('イベントが作成されました')}>
      トーストを表示
    </Button>
  )
}

バリエーション

成功

toast.success('保存しました')

エラー

toast.error('エラーが発生しました')

警告

toast.warning('注意が必要です')

情報

toast.info('お知らせがあります')

説明付き

toast('イベントが作成されました', {
  description: '2024年1月1日 9:00',
})

アクションボタン付き

toast('ファイルを削除しました', {
  action: {
    label: '元に戻す',
    onClick: () => console.log('Undo clicked'),
  },
})

Promise対応

非同期処理の状態を表示できます。

const promise = fetch('/api/data')
 
toast.promise(promise, {
  loading: '読み込み中...',
  success: '完了しました',
  error: 'エラーが発生しました',
})

カスタム表示時間

toast('5秒間表示されます', {
  duration: 5000, // ミリ秒
})

位置の変更

Toaster の position プロパティで表示位置を変更できます。

<Toaster position="top-center" />

利用可能な位置:

top-left
top-center
top-right
bottom-left
bottom-center
bottom-right（デフォルト）

Props

Toaster

Prop	Type	Default	Description
`theme`	`'light' \| 'dark' \| 'system'`	`'system'`	テーマ設定
`position`	`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	`'top-center'`	表示位置
`richColors`	`boolean`	`false`	バリエーションごとに背景色も変える（デフォルトは背景白でborder・文字・アイコン色のみ変更）
`expand`	`boolean`	`false`	トーストを展開表示
`duration`	`number`	`4000`	デフォルトの表示時間（ミリ秒）
`closeButton`	`boolean`	`false`	閉じるボタンを表示

toast関数

関数	説明
`toast(message)`	デフォルトのトースト
`toast.success(message)`	成功トースト
`toast.error(message)`	エラートースト
`toast.warning(message)`	警告トースト
`toast.info(message)`	情報トースト
`toast.promise(promise, options)`	非同期処理のトースト
`toast.dismiss(id?)`	トーストを閉じる

Sonner

On this page