S-006 Toast Snackbar | Vibe UI Pattern Library

ライブデモ Live Demo

ボタンを押すと右下からトーストがスライドインします。数秒後に自動で閉じるか、閉じるボタンで非表示にできます。

Click the button to show a toast sliding in from the bottom-right. It auto-hides after a few seconds or can be dismissed with a close button.

表示時間（秒） Display Duration (s) 4

アニメーション速度 Animation Speed 0.35s

AI向け説明 AI Description

`S-006` は画面端（ここでは右下）に固定したトースト要素を、初期状態で `transform: translateX(100% + margin)` と `opacity: 0` にし、表示時にクラスで `translateX(0)` と `opacity: 1` に `transition` で変化させます。collect UI などでよく見るスナックバー／トーストのスライドインパターンです。

`S-006` keeps the toast element off-screen with `transform: translateX(100% + margin)` and `opacity: 0`. A class toggles to `translateX(0)` and `opacity: 1` with a `transition`. Common slide-in toast/snackbar pattern as in collect UI.

調整可能パラメータ Adjustable Parameters

--toast-duration — スライドイン／アウトの時間slide in/out duration
--toast-bg / --toast-color — 背景色・文字色background and text color
表示時間 — 自動で閉じるまでの秒数（JS）auto-hide delay in seconds (JS)

実装 Implementation

HTML + CSS

<div class="toast" id="toast" role="status" aria-live="polite">
  Saved successfully
  <button type="button" data-dismiss>×</button>
</div>

<style>
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 20px;
  background: #1d2242;
  color: #f5f6ff;
  border-radius: 12px;
  transform: translateX(calc(100% + 40px));
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}
</style>

<script>
const toast = document.getElementById('toast');
function show() {
  toast.classList.add('is-visible');
  setTimeout(() => toast.classList.remove('is-visible'), 4000);
}
toast.querySelector('[data-dismiss]').addEventListener('click', () => toast.classList.remove('is-visible'));
</script>

React (JSX + CSS)

// 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 */

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: S-006
- パターン名: トースト通知
- 参照URL: https://devsnips.dev/animations/S-006.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: S-006
- Pattern Name: Toast Snackbar
- Reference URL: https://devsnips.dev/animations/S-006.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]

注意とバリエーション Notes & Variations

左上・左下・中央など配置を変える場合は `left/right/bottom/top` と `translateX` または `translateY` を組み合わせてください。参考: collect UI (collectui.com)。

For other positions (top-left, bottom-left, center), combine `left/right/bottom/top` with `translateX` or `translateY`. Reference: collect UI.