トーストToastExperimental
一時的に表示する短いメッセージです。
プレビュー
状態とバリエーション
成功通知
保存や更新が完了したことを短く伝えます。
失敗通知
復旧できる失敗を短く示し、必要なら近くの操作で再試行させます。
情報通知
ユーザーの操作を止めない軽い更新に使います。
枠内で確認する
docs やカード内で確認する場合は inline を指定します。実アプリで単体 Toast を画面上に浮かせる場合は既定の fixed を使います。
補足＋操作つき
description で2行目を、action で操作ボタンを1つ足せます。action を押すと onClick 実行後にトーストが閉じます。action があり duration 未指定なら、押す前に消えないよう既定を長めにします。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| message | string | - | 通知に表示する短い本文です。 |
| type | "error" | "info" | "success" | 'success' | 通知の意味を示す見た目です。 |
| isVisible | boolean | - | 表示状態です。false の時は描画しません。 |
| onClose | () => void | - | 自動クローズまたは閉じるボタンで呼び出します。 |
| description | ReactNode | - | message の下に muted 色で表示する2行目の補足です。 |
| action | { label: string; onClick: () => void; altText?: string } | - | 閉じるボタンの手前に置く操作ボタンを1つ。押すと onClick を実行してからトーストを閉じます。 |
| duration | number | 3000（action ありは 6000） | 自動で閉じるまでの時間（ミリ秒）。action があり未指定なら、押す前に消えないよう既定を長くします。 |
| placement | 'fixed' | 'inline' | 'fixed' | 実アプリでは fixed、docs やカード内プレビューでは inline を使います。 |
| closeLabel | string | 'Close notification' | 閉じるボタンのアクセシブルラベルとツールチップです。 |
使い方
import { Toast } from "@gunjo/ui"
export function SavedToast() {
return (
<Toast
message="プロジェクトを保存しました。"
type="success"
isVisible={true}
onClose={() => {}}
placement="inline"
closeLabel="通知を閉じる"
/>
)
}設計の判断
- 操作の付いた通知だけ、長く出す。資料は「気づかない」「読む前に消える」を核の危険として挙げています。GUNJO は消えるまでの既定を3秒にし、
action（元に戻す、などのボタン）が付いているときだけ6秒にしました（#301）。押させるつもりのものを、読む時間だけで消してはいけないからです。durationを渡せばどちらも上書きできます。 - 失敗のときだけ、読み上げの割り込み方を変える。
typeが失敗のときは割り込む役割を、それ以外は割り込まない役割を付けます。ただし資料は「決済の失敗のような絶対に見逃せないエラーをトーストで出す」ことを崩れた形に挙げています。GUNJO に失敗の型があるのは、やり直しの効く失敗（保存できなかった、など）のためで、後戻りできない失敗はAlertやAlertDialogの仕事です。 - 積み上がる場所は Provider が持つ。
ToastProviderが縦並びの箱を作り、間を空けて重ねます。placementに容器を指定すると、画面全体ではなく渡した枠の中に出ます。docs の埋め込みプレビューのように、ページ全体を覆っては困る場所のためです。消えるときは表示を止めてから300ms後に取り除くので、出ていく動きが最後まで見えます。
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。