Overlays & Feedback·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { Toaster, toast, Button } from "@sisyphos-ui/react";

export const App = () => (
  <>
    <Toaster position="bottom-right" />
    <Button onClick={() => toast.success("Saved")}>Save</Button>
  </>
);

Title + description

Second argument accepts `{ description, duration, dismissible, … }`.

example.tsxtsx

With undo action

Pass any ReactNode as `action`. Use `toast.dismiss(id)` to close from inside the action.

example.tsxtsx

Promise + loading

`toast.promise(p, { loading, success, error })` morphs a loading toast into success or error when the promise settles — same id, same slot, animated transition. `success` / `error` accept a function of the resolved value / thrown error.

example.tsxtsx

All positions

Pick any of the six anchor points. The `<Toaster />` itself drives layout.

example.tsxtsx

API

Prop	Type	Default	Description
position	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	Toaster: corner or edge where the stack is anchored.
max	number	5	Toaster: max toasts visible at once; excess remain queued in state.
gap	number	8	Toaster: gap between stacked toasts in px.
description	ReactNode	—	`toast()` option: longer explanation rendered under the title.
duration	number	4000	`toast()` option: auto-dismiss delay in ms; pass `Infinity` to persist.
icon	ReactNode \| null	—	`toast()` option: override the per-type default icon; pass `null` to hide it.
action	ReactNode	—	`toast()` option: action element (button) rendered on the right.
dismissible	boolean	true	`toast()` option: show the X close button.
id	string	—	`toast()` option: provide an id to update or dedupe an existing toast.
onDismiss	(id: string) => void	—	`toast()` option: fired when the toast is removed for any reason.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Adheres to the Alert WAI-ARIA design pattern.

Error toasts render role="alert" with aria-live="assertive"; every other type uses role="status" with aria-live="polite", so only errors interrupt the screen reader.
Auto-dismiss pauses while the pointer hovers a toast, giving users time to read or act.
The close button carries aria-label="Dismiss notification"; type icons are decorative and aria-hidden.
toast.loading and toast.promise reuse a stable id, so the loading → success/error transition updates the existing toast in place instead of spawning a new announcement.

Keyboard interactions

Key	Action
`Tab`	Reaches a toast's action and dismiss buttons — both are native buttons in the document tab order.
`Enter`then`Space`	Activates the focused dismiss or action button.

Need more?View on npm →