Primitives

Toast

Non-intrusive notification system for displaying brief messages. Supports multiple variants, auto-dismiss, and a hook-based API via ToastProvider.

Live Demo

Interactive Toasts (auto-dismiss after 3s)

Installation

npm install @trinkui/react

Import

import { ToastProvider, useToast } from "@trinkui/react";

Setup

Wrap your app with ToastProvider to enable toasts globally.

// app/layout.tsx
import { ToastProvider } from "@trinkui/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ToastProvider>
          {children}
        </ToastProvider>
      </body>
    </html>
  );
}

Usage

Changes saved

Your profile has been updated successfully.

function MyComponent() {
  const { toast } = useToast();

  return (
    <Button onClick={() => toast({
      title: "Changes saved",
      description: "Your profile has been updated successfully.",
    })}>
      Show Toast
    </Button>
  );
}

Variants

Default

This is a default notification.

Success

Operation completed successfully.

Warning

Please review before continuing.

Danger

Something went wrong. Please try again.

toast({ title: "Default", description: "..." });
toast({ title: "Success", description: "...", variant: "success" });
toast({ title: "Warning", description: "...", variant: "warning" });
toast({ title: "Danger", description: "...", variant: "danger" });

Duration

// Auto-dismiss after 3 seconds (default: 5000ms)
toast({ title: "Quick!", duration: 3000 });

// Persist until manually dismissed
toast({ title: "Sticky", duration: Infinity });

Toast Options

Prop	Type	Default	Description
title	string	--	Main heading text for the toast
description	string	--	Secondary description text below the title
variant	"default" \| "success" \| "warning" \| "danger"	"default"	Visual style and icon of the toast
duration	number	5000	Auto-dismiss duration in milliseconds; use Infinity to persist

ToastProvider Props

Prop	Type	Default	Description
children	ReactNode	--	Application content
position	"top-right" \| "top-left" \| "bottom-right" \| "bottom-left"	"bottom-right"	Screen position for the toast stack
maxToasts	number	5	Maximum number of visible toasts at once

Accessibility

Toast container uses role="status" and aria-live="polite" for screen reader announcements.
Danger toasts use aria-live="assertive" for immediate announcement.
Dismiss button includes an accessible aria-label.
Toasts respect prefers-reduced-motion for enter/exit animations.

Textarea Tooltip