How to create a toast snackbar トースト通知の作り方
Slide-in notification from the edge. Adjust display duration and animation speed. 画面端からスライドインする一時通知。表示時間とアニメーション速度を調整できます。
ライブデモ Live Demo
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
Slide-in notification from the edge. Adjust display duration and animation speed.
画面端からスライドインする一時通知。表示時間とアニメーション速度を調整できます。
どこで使うかWhere to use
web application, marketing page
アクション確認、エラー通知、成功フィードバック、システムアラート
特徴Key features
Lightweight toast/snackbar notification that slides in from bottom (or top). Auto-dismisses after a configurable timeout. Stacks multiple toasts vertically. Supports info, success, warning, and error variants. Accessible via aria-live.
ボトム（またはトップ）からスライドインする軽量トースト/スナックバー通知。設定可能なタイムアウト後に自動消去。複数のトーストを縦に積み重ね。info・success・warning・errorバリアントをサポート。aria-liveでアクセシブル。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
--toast-duration | — | slide in/out duration |
--toast-bg / --toast-color | — | background and text color |
表示時間 | — | auto-hide delay in seconds (JS) |
実装コード Implementation Code
// react/S-006.jsx
import "./S-006.css";
import { useState, useEffect } from "react";
export default function Toast({ message, visible, onClose, duration = 4000 }) {
useEffect(() => {
if (!visible) return;
const t = setTimeout(onClose, duration);
return () => clearTimeout(t);
}, [visible, duration, onClose]);
return (
<div className={"toast" + (visible ? " is-visible" : "")} role="status" aria-live="polite">
{message}
<button type="button" onClick={onClose} aria-label="close">×</button>
</div>
);
}/* react/S-006.css - same as above */import "./S-006.css";
import { useState, useEffect } from "react";
export default function Toast({ message, visible, onClose, duration = 4000 }) {
useEffect(() => {
if (!visible) return;
const t = setTimeout(onClose, duration);
return () => clearTimeout(t);
}, [visible, duration, onClose]);
return (
<div className={"toast" + (visible ? " is-visible" : "")} role="status" aria-live="polite">
{message}
<button type="button" className="toast-close" onClick={onClose} aria-label="close">×</button>
</div>
);
}:root {
--toast-duration: 0.35s;
--toast-bg: #1d2242;
--toast-color: #f5f6ff;
}
.toast {
position: absolute;
bottom: 24px;
right: 24px;
padding: 14px 20px;
background: var(--toast-bg);
color: var(--toast-color);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
font-size: 14px;
font-weight: 500;
transform: translateX(calc(100% + 40px));
opacity: 0;
transition: transform var(--toast-duration) ease, opacity var(--toast-duration) ease;
max-width: 280px;
}
.toast.is-visible {
transform: translateX(0);
opacity: 1;
}
.toast-close {
margin-left: 12px;
padding: 0 4px;
background: transparent;
border: none;
color: inherit;
font-size: 18px;
cursor: pointer;
line-height: 1;
opacity: 0.8;
}
.toast-close:hover {
opacity: 1;
}仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
A toast container (fixed, bottom-right) holds toast elements. Each toast is created by appending a div with the message and type class. A CSS transition animates translateY from off-screen to 0. A setTimeout removes the element after the duration. For stacking, each new toast is prepended, shifting older toasts up.
トーストコンテナ（fixed、右下）がトースト要素を保持。各トーストはメッセージとタイプクラスを持つdivを追加することで作成。CSSトランジションがtranslateYを画面外から0にアニメーション。setTimeoutがduration後に要素を削除。スタッキングでは各新しいトーストを先頭に追加して古いトーストを上にシフト。
カスタマイズ方法Customization
Add a progress bar at the bottom of each toast that drains during the auto-dismiss countdown. Allow users to manually dismiss by clicking the toast. Adjust the queue max to prevent more than 3-4 toasts visible at once.
自動消去カウントダウン中に減っていくプログレスバーを各トーストの下部に追加。トーストをクリックすることでユーザーが手動で消去できるようにする。一度に3〜4個以上のトーストが表示されないようキューの最大値を調整。
注意点Caveats
Place the toast container in an aria-live="polite" region so messages are announced to screen readers without interrupting current reading. Use aria-live="assertive" only for critical error messages. Ensure auto-dismiss timing is long enough for users to read the message (minimum 3s).
トーストコンテナをaria-live="polite"リージョンに配置して現在の読み取りを中断せずにスクリーンリーダーにメッセージをアナウンスしてください。aria-live="assertive"は重要なエラーメッセージにのみ使用してください。ユーザーがメッセージを読むのに十分な自動消去タイミング（最低3秒）を確保してください。
よくある質問 Frequently Asked Questions
How to customize the toast snackbar? Toast Snackbarをカスタマイズするには？
Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.
コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。
How to use the toast snackbar in React? ReactでToast Snackbarを使うには？
Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.
提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。
What are the performance implications of toast snackbar? Toast Snackbarのパフォーマンスへの影響は？
This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.
この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.