Overlay Plugin

GS Toast

Toast notification system with 8 positions, stacking + queue, progress bars, swipe-dismiss, and per-edge entrance animations.

Latest: v1.0.2

Downloads last month: 187

Visit Demo Website

Install Package

npm i @get-set/gs-toast

or via CDN

<link rel="stylesheet" href="https://cdn.get-set.it/gs-toast/latest/gs-toast.min.css">
<script src="https://cdn.get-set.it/gs-toast/latest/gs-toast.min.js"></script>

Interactive Playground

Live Sandbox

Toast.jsx

import Toast from '@get-set/gs-toast';

export default function App() {
  return (
    <Toast>
      <div className="content">Your Toast content</div>
    </Toast>
  );
}

import Toast from '@get-set/gs-toast';

export default function App() {
  return (
    <Toast>
      <div className="content">Your Toast content</div>
    </Toast>
  );
}

Live Preview

Every click fires a toast with your current options.

Options

Configuration Values

Reference

Position

Gap

Max Visible

Type

Title

Message

Html

Icon

Duration

Auto Close

Swipe Threshold

Progress Direction

Animation

Exit Animation

Animation Duration

Animation Easing

Theme

Accent

Class Name

Role

Feature Flags

Newest On TopPause On HoverPause On Focus LossClose ButtonDismiss On ClickSwipe To DismissProgress BarReduced MotionRtl

API Specifications

Option	Type	Default	Description
reference	string	none	Stable id. Auto-generated when omitted; reused by `update`/`dismiss`.
position	GSToastPosition	'top-right'	Container position anchor. Default: 'top-right'.
gap	number	12	Gap (px) between stacked toasts. Default: 12.
maxVisible	number	none	Max toasts visible per container; the rest queue. Default: Infinity.
newestOnTop	boolean	true	Newest toast appears on top of the stack. Default: true.
type	GSToastType	'default'	Semantic type. Drives the auto icon + accent. Default: 'default'.
title	string	none	Bold heading line.
message	string	none	Body text (escaped).
html	string	none	Rich HTML body (used instead of `message` when set).
icon	string \| false	none	Icon override. HTML string, `false` to hide, or omit for the auto icon.
duration	number \| false	5000	Auto-dismiss delay in ms. `false` = sticky (no auto-close). Default 5000.
autoClose	number \| false	none	Alias of `duration` (react-toastify naming). Overrides when set.
pauseOnHover	boolean	true	Pause the countdown while the pointer is over the toast. Default: true.
pauseOnFocusLoss	boolean	true	Pause the countdown while the window/tab loses focus. Default: true.
closeButton	boolean	true	Show the × dismiss button. Default: true.
dismissOnClick	boolean	false	Dismiss when the toast body is clicked. Default: false.
swipeToDismiss	boolean	true	Drag/swipe to dismiss. Default: true.
swipeThreshold	number	80	Distance (px) past which a swipe dismisses. Default: 80.
progressBar	boolean	true	Show the depleting countdown progress bar. Default: true when timed.
progressDirection	GSToastProgressDirection	'rtl'	Direction the progress bar runs. Default: 'rtl' (depletes to the start).
animation	GSToastAnimation \| false	'slide'	Entrance animation name. `false` disables motion. Default 'slide'.
exitAnimation	GSToastAnimation \| false	none	Exit animation name. Mirrors `animation` when omitted.
animationDuration	number \| { enter?: number; exit?: number }	320	Animation duration(s) in ms. Number = both; object = per phase.
animationEasing	string	'cubic-bezier(.21,1.02,.73,1)'	CSS easing for the toast animation.
reducedMotion	'auto' \| boolean	'auto'	Honor prefers-reduced-motion. 'auto' \| true \| false. Default 'auto'.
actions	GSToastAction[]	none	Action buttons rendered under the message.
theme	GSToastTheme	'auto'	Visual theme. Default: 'auto'.
accent	string	none	Accent color override (CSS var --gst-accent).
rtl	boolean	false	Right-to-left layout. Default: false.
customClass	GSToastCustomClass	none	Per-part class overrides.
className	string	none	Extra class name applied to the toast root.
role	'status' \| 'alert' \| 'log'	none	ARIA role. Default: 'status' ('alert' for error/warning).

Technical Features

8 Positions

Any corner or edge of the screen.

Queue & Stack

Throttled queue with graceful stacking.

Progress Bars

Auto-dismiss countdown you can pause on hover.

Swipe Dismiss

Flick a toast away on touch devices.

API Specifications

Option	Type	Default	Description
reference	string	none	Stable id. Auto-generated when omitted; reused by `update`/`dismiss`.
position	GSToastPosition	'top-right'	Container position anchor. Default: 'top-right'.
gap	number	12	Gap (px) between stacked toasts. Default: 12.
maxVisible	number	none	Max toasts visible per container; the rest queue. Default: Infinity.
newestOnTop	boolean	true	Newest toast appears on top of the stack. Default: true.
type	GSToastType	'default'	Semantic type. Drives the auto icon + accent. Default: 'default'.
title	string	none	Bold heading line.
message	string	none	Body text (escaped).
html	string	none	Rich HTML body (used instead of `message` when set).
icon	string \| false	none	Icon override. HTML string, `false` to hide, or omit for the auto icon.
duration	number \| false	5000	Auto-dismiss delay in ms. `false` = sticky (no auto-close). Default 5000.
autoClose	number \| false	none	Alias of `duration` (react-toastify naming). Overrides when set.
pauseOnHover	boolean	true	Pause the countdown while the pointer is over the toast. Default: true.
pauseOnFocusLoss	boolean	true	Pause the countdown while the window/tab loses focus. Default: true.
closeButton	boolean	true	Show the × dismiss button. Default: true.
dismissOnClick	boolean	false	Dismiss when the toast body is clicked. Default: false.
swipeToDismiss	boolean	true	Drag/swipe to dismiss. Default: true.
swipeThreshold	number	80	Distance (px) past which a swipe dismisses. Default: 80.
progressBar	boolean	true	Show the depleting countdown progress bar. Default: true when timed.
progressDirection	GSToastProgressDirection	'rtl'	Direction the progress bar runs. Default: 'rtl' (depletes to the start).
animation	GSToastAnimation \| false	'slide'	Entrance animation name. `false` disables motion. Default 'slide'.
exitAnimation	GSToastAnimation \| false	none	Exit animation name. Mirrors `animation` when omitted.
animationDuration	number \| { enter?: number; exit?: number }	320	Animation duration(s) in ms. Number = both; object = per phase.
animationEasing	string	'cubic-bezier(.21,1.02,.73,1)'	CSS easing for the toast animation.
reducedMotion	'auto' \| boolean	'auto'	Honor prefers-reduced-motion. 'auto' \| true \| false. Default 'auto'.
actions	GSToastAction[]	none	Action buttons rendered under the message.
theme	GSToastTheme	'auto'	Visual theme. Default: 'auto'.
accent	string	none	Accent color override (CSS var --gst-accent).
rtl	boolean	false	Right-to-left layout. Default: false.
customClass	GSToastCustomClass	none	Per-part class overrides.
className	string	none	Extra class name applied to the toast root.
role	'status' \| 'alert' \| 'log'	none	ARIA role. Default: 'status' ('alert' for error/warning).