トースト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 * as React from "react"
import { Button, Toast } from "@gunjo/ui"
export function SaveToastExample() {
const [visible, setVisible] = React.useState(false)
return (
<div className="space-y-4">
<Button variant="outline" onClick={() => setVisible(true)}>
保存する
</Button>
<Toast
message="プロジェクトを保存しました。"
type="success"
isVisible={visible}
onClose={() => setVisible(false)}
duration={2500}
placement="inline"
closeLabel="通知を閉じる"
/>
</div>
)
}設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。