Toast

Toast notifications provide brief, non-intrusive feedback about an operation. They appear temporarily and can include actions.

import { Toast } from "@ninna-ui/feedback"

pnpm add @ninna-ui/feedback

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Add the Toaster component to your app root, then use the toast function to show notifications.

import { Toaster, toast } from "@ninna-ui/feedback";

// Add Toaster to your app root
export default function App() {
  return (
    <>
      <YourApp />
      <Toaster />
    </>
  );
}

// Use toast anywhere in your app
function MyComponent() {
  return (
    <button onClick={() => toast.success("Saved!")}>
      Save
    </button>
  );
}

Basic

Basic toast notification with title and description.

Types

Different toast types for various notification purposes.

Variants

Visual variants for different styles.

Positions

Each Toaster instance has its own position. Use id on Toaster and toasterId on toast.create() to route toasts to specific positions independently.

With Action

Toast with an action button.

Custom Duration

Control how long toasts stay visible.

Promise

Show loading, success, or error states based on a promise.

Simple Messages

Quick toast with just a string message.

Dismiss

Programmatically dismiss toasts.

API Reference

Complete API documentation for Toast components.

Toaster Props

Props

Prop	Type	Default	Description
`position`	`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	`'bottom-right'`	Position of toasts on screen
`id`	`string`	-	Unique identifier — only toasts created with a matching toasterId will be shown by this Toaster. Omit for the default global Toaster.
`max`	`number`	`5`	Maximum number of visible toasts
`gap`	`number`	`8`	Gap between toasts in pixels
`offset`	`string \| number`	`'1rem'`	Offset from screen edges
`pauseOnHover`	`boolean`	`true`	Pause auto-dismiss when hovering over toasts
`className`	`string`	-	Additional CSS classes for the toast container

Toast Options

Props

Prop	Type	Default	Description
`title`	`ReactNode`	-	Toast title
`description`	`ReactNode`	-	Toast description/message
`type`	`'default' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'loading'`	`'default'`	Toast type/status
`variant`	`'solid' \| 'soft' \| 'outline'`	`'soft'`	Visual variant
`duration`	`number`	`5000`	Duration in milliseconds (0 = persistent)
`closable`	`boolean`	`true`	Whether the toast can be dismissed
`icon`	`ReactNode`	-	Custom icon
`action`	`{ label: string; onClick: () => void; altText?: string }`	-	Action button configuration
`toasterId`	`string`	-	Route this toast to a specific Toaster by its id. Omit to send to the default global Toaster.

Toast Methods

Props

Prop	Type	Default	Description
`toast.create(options)`	`string`	-	Create a new toast, returns toast ID
`toast.success(options \| string)`	`string`	-	Create a success toast
`toast.error(options \| string)`	`string`	-	Create an error toast
`toast.warning(options \| string)`	`string`	-	Create a warning toast
`toast.info(options \| string)`	`string`	-	Create an info toast
`toast.loading(options \| string)`	`string`	-	Create a loading toast (persistent)
`toast.dismiss(id?)`	`void`	-	Dismiss a toast by ID, or all if no ID
`toast.dismissAll()`	`void`	-	Dismiss all toasts
`toast.update(id, options)`	`void`	-	Update an existing toast
`toast.promise(promise, options)`	`Promise<T>`	-	Show loading/success/error based on promise state

Accessibility

ARIA Support

role="status": Used for non-critical toasts (default, success, info, warning, loading)
role="alert": Used for error toasts to ensure immediate announcement
aria-live="polite": For non-critical notifications
aria-live="assertive": For error notifications
aria-atomic="true": Ensures the entire toast is announced

Keyboard Navigation

Escape: Dismisses the most recent toast
Tab: Navigate between toast elements (action button, close button)
Enter/Space: Activate focused button

Focus Management

Toasts are focusable with tabIndex=0
Focus is not stolen when toasts appear
Close buttons have proper aria-label
Action buttons include aria-label with altText

Motion & Timing

prefers-reduced-motion: Animations are disabled for users who prefer reduced motion
Pause on hover: Auto-dismiss pauses when hovering over toasts
Pause on focus: Auto-dismiss pauses when toast is focused