Toast

一時的な通知メッセージを表示するフィードバックコンポーネント。操作完了やエラー通知など、自動的に消えるメッセージに使用します。

Basic

jui-toast の最も基本的な使用例です。

関連コンポーネント

• Alert - アラート通知
• Modal - モーダルダイアログ

アクセシビリティ

• WAI-ARIA:
  • トーストのルート要素には、バリアントに応じて role と aria-live が自動的に設定されます。variant="danger" および variant="warning" の場合は role="alert" と aria-live="assertive"（即座に読み上げ）、variant="info" および variant="success" の場合は role="status" と aria-live="polite"（手すきのタイミングで読み上げ）が付与されます。
  • aria-atomic="true" が常に指定されており、トーストの内容が更新された際に領域全体がひとまとまりとして読み上げられます。
  • duration（デフォルト 5000ms）の経過で自動的に閉じます。duration="0" を指定すると自動消去を無効化でき、読み上げに時間を要する利用者に配慮できます。表示・自動消去はいずれも aria-live 領域を通じて支援技術へ通知されます。
  • dismissible（デフォルト true）のときに表示される閉じるボタンはネイティブの <button type="button"> で、aria-label に dismissLabel（デフォルト "Dismiss"）が設定されます。dismissLabel Prop により多言語化できます。
  • アイコンおよび閉じるボタン内の SVG には aria-hidden="true" が指定されており、装飾要素として支援技術から無視されます。
• キーボードナビゲーション:
  • dismissible 時の閉じるボタンはネイティブの <button> 要素のため、Tab キーでフォーカスでき、Enter または Space キーでトーストを閉じることができます。

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
dismissLabel	dismiss-label	閉じるボタンのアクセシビリティラベル（i18n対応）	string	'Dismiss'
dismissible	dismissible	閉じるボタンの表示	boolean	true
duration	duration	自動で閉じるまでの時間（ms）。0 の場合は自動で閉じない	number	5000
message	message	メッセージテキスト	string	''
position	position	表示位置	"bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right"	'top-right'
variant	variant	トーストのバリアント	"danger" | "info" | "success" | "warning"	'info'
visible	visible	表示状態	boolean	false

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
juiDismiss	トーストが閉じた時に発火	CustomEvent<{ reason: "manual" | "auto"; }>

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	メッセージ（message Prop より優先）

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"content"	メッセージコンテンツ
"dismiss"	閉じるボタン
"icon"	アイコン要素
"toast"	トーストのルート要素

---

Built with StencilJS