Toast

Toastは、ユーザーのアクションに対する一時的なフィードバックを表示するコンポーネントです。画面の端に表示され、一定時間後に自動的に消えます。命令的API（toast.success() など）で簡単にトリガーできます。

デザイン仕様: Toastの幅は360px固定です。360px未満の画面ではmax-width: calc(100vw - 48px)で自動的に縮小されます。

Types

Positions

Promise

Async Support

Pure

React

Playground

Preview

defaultbottom-right

Type

Position

Options

toast('Event has been created', {
  description: 'Monday, January 3rd at 6:00 PM',
})

Types

Features

Action & Cancel

actioncancelとでインラインボタンを追加できます。

toast('File deleted', {
  action: { label: 'Undo', onClick: () => handleUndo() },
  cancel: { label: 'Dismiss', onClick: () => {} },
})

Promise

toast.promise()で非同期処理のローディング→成功/エラーを自動遷移します。

toast.promise(
  fetch('/api/save'),
  {
    loading: 'Saving...',
    success: 'Saved!',
    error: 'Failed to save',
  }
)

Close Button

closeButtonでトーストに閉じるボタンを表示します。

toast.info('Notification', {
  closeButton: true,
  description: 'You have 3 unread messages.',
})

Rich Colors

richColorsをToasterに設定すると、ステータストーストがソリッド背景で強調されます。

<Toaster richColors />

toast.success('Saved!')  // solid green background
toast.error('Failed!')   // solid red background

Loading

toast.loading()はスピナー付きで永続表示されます。手動で閉じるかtoast.dismiss(id)で消去します。

const id = toast.loading('Processing...')
// Later:
toast.dismiss(id)

API

Component Structure

Toast— Pure React (Imperative API)

toast()Propstoast.success()toast.error()toast.warning()toast.info()toast.loading()toast.promise()toast.custom()toast.dismiss()<Toaster />Props

toast(message, options?)Props基本トースト

toast.success(message, options?)成功トースト

toast.error(message, options?)エラートースト

toast.warning(message, options?)警告トースト

toast.info(message, options?)情報トースト

toast.loading(message, options?)ローディングトースト（永続）

toast.promise(promise, handlers)Promise連動トースト

toast.custom(render, options?)カスタムJSXトースト

toast.dismiss(id?)トーストを閉じる（id省略で全閉じ）

<Toaster />Propsレンダリングプロバイダー

Props

Toaster

position"bottom-right"

トーストの表示位置

duration4000

number

自動消去までの時間（ms）。0で永続表示

visibleToasts5

number

同時に表示するトーストの最大数

closeButtonfalse

boolean

全トーストに閉じるボタンを表示

richColorstrue

boolean

ステータス色をソリッド背景に強調。falseでティント背景に切替

expandfalse

boolean

常にすべてのトーストを展開表示

offset24

number

画面端からのオフセット（px）

gap8

number

トースト間の間隔（px）

size"default"

"sm" | "default" | "lg"

トーストのサイズ

classNameundefined

string

コンテナの追加CSSクラス

Name	Type	Default	Description
`position`	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`	`"bottom-right"`	トーストの表示位置
`duration`	`number`	`4000`	自動消去までの時間（ms）。0で永続表示
`visibleToasts`	`number`	`5`	同時に表示するトーストの最大数
`closeButton`	`boolean`	`false`	全トーストに閉じるボタンを表示
`richColors`	`boolean`	`true`	ステータス色をソリッド背景に強調。falseでティント背景に切替
`expand`	`boolean`	`false`	常にすべてのトーストを展開表示
`offset`	`number`	`24`	画面端からのオフセット（px）
`gap`	`number`	`8`	トースト間の間隔（px）
`size`	`"sm" \| "default" \| "lg"`	`"default"`	トーストのサイズ
`className`	`string`	`undefined`	コンテナの追加CSSクラス

toast() Options

descriptionundefined

ReactNode

補足説明テキスト

duration4000

number

個別の自動消去時間（ms）

dismissibletrue

boolean

閉じ可能かどうか

closeButtonfalse

boolean

閉じるボタンの表示

iconauto (by type)

ReactNode

カスタムアイコン

actionundefined

{ label: string; onClick: () => void }

アクションボタン

cancelundefined

{ label: string; onClick: () => void }

キャンセルボタン

onDismissundefined

(toast) => void

閉じた時のコールバック

onAutoCloseundefined

(toast) => void

自動消去時のコールバック

idauto

string

トーストの識別子（更新・dismiss用）

classNameundefined

string

個別トーストの追加CSSクラス

Name	Type	Default	Description
`description`	`ReactNode`	`undefined`	補足説明テキスト
`duration`	`number`	`4000`	個別の自動消去時間（ms）
`dismissible`	`boolean`	`true`	閉じ可能かどうか
`closeButton`	`boolean`	`false`	閉じるボタンの表示
`icon`	`ReactNode`	`auto (by type)`	カスタムアイコン
`action`	`{ label: string; onClick: () => void }`	`undefined`	アクションボタン
`cancel`	`{ label: string; onClick: () => void }`	`undefined`	キャンセルボタン
`onDismiss`	`(toast) => void`	`undefined`	閉じた時のコールバック
`onAutoClose`	`(toast) => void`	`undefined`	自動消去時のコールバック
`id`	`string`	`auto`	トーストの識別子（更新・dismiss用）
`className`	`string`	`undefined`	個別トーストの追加CSSクラス

Code Recipes

Anatomy

Undo

Toast Root

トースト全体のコンテナ

Icon

ステータスアイコン

Message

メインメッセージ

Description

補足説明テキスト

Action

アクションボタン

閉じるボタン

Best Practices

✓

推奨

✓短くて明確なメッセージを使用する
✓ステータスに適したtypeを使用する
✓破壊的アクションにはUndoアクションを提供する

避けるべき

✕トーストに長い文章やフォームを入れない
✕ユーザー確認が必要な場合はModal/AlertModalを使う
✕永続的な状態通知にはAlertを使う（Toastは一時的）
✕同時に大量のトーストを表示しない

Toast vs Alert

どちらもユーザーへの通知に使いますが、表示の持続性とインタラクションが異なります。

表示

Toast: 一時的に表示され自動で消える

Alert: ページ内に固定（永続的）

トリガー

Toast: ユーザーアクション後のフィードバック

Alert: ページロード時・状態変化時

コンテンツ

Toast: 短いメッセージ（1〜2行）

Alert: タイトル＋説明（リッチ）

閉じ方

Toast: 自動消去（数秒後）

Alert: 手動（closable）or 常時表示

用途

Toast: 保存完了、コピー完了など

Alert: システム状態、警告、エラー

ARIA

Toast: role="status" + aria-live

Alert: role="alert" / role="status"

特徴	Toast	Alert
表示	一時的に表示され自動で消える	ページ内に固定（永続的）
トリガー	ユーザーアクション後	ページロード時・状態変化時
コンテンツ	短いメッセージ	タイトル＋説明（リッチ）
閉じ方	自動消去（数秒後）	手動（closable）or 常時表示
用途	保存完了、コピー完了	システム状態、警告、エラー
ARIA	role="status" + aria-live	role="alert" / role="status"

使い分けのポイント： Toastはユーザーアクションに対する一時的なフィードバックに使用。ページ内の永続的な状態通知にはAlertを使用します。

Accessibility

ARIA / WCAG

role="alert" error/warning時に自動付与
role="status" default/success/info/loading時
aria-live="assertive" 緊急通知（error/warning）
aria-live="polite" 通常通知（default/success/info/loading）
コンテナにaria-label="Notifications"
閉じるボタンにaria-label="Close"
ホバー時にタイマー自動一時停止

Toast

Playground

Types

Features

Action & Cancel

Promise

Close Button

Rich Colors

Loading

API

Component Structure

Props

Toaster

toast() Options

Code Recipes

Anatomy

Best Practices

推奨

避けるべき

Toast vs Alert

Accessibility

ARIA / WCAG

Related

Alert

Modal

Badge

Spinner