KARAKURIDESIGN SYSTEM

Toast

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

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

6
Types
6
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

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

Promise

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

Close Button

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

Rich Colors

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

Loading

toast.loading()はスピナー付きで永続表示されます。手動で閉じるか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

Props

Toaster

position"bottom-right"
"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "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クラス

toast() Options

descriptionundefined
ReactNode

補足説明テキスト

duration4000
number

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

dismissibletrue
boolean

閉じ可能かどうか

closeButtonfalse
boolean

閉じるボタンの表示

iconauto (type別)
ReactNode

カスタムアイコン

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

アクションボタン

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

キャンセルボタン

onDismissundefined
(toast) => void

閉じた時のコールバック

onAutoCloseundefined
(toast) => void

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

idauto
string

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

classNameundefined
string

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

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を使用します。