Thrive Design System

Components

Toaster

A toast notification system for displaying brief, auto-dismissing feedback messages.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

Add the <Toaster /> component to your app layout, then use the toaster utility to trigger notifications:

import { Toaster, toaster } from '@thrivecart/ui';

// In your layout
<Toaster />

// Trigger toasts anywhere
toaster.success('Campaign published successfully');
toaster.error('Failed to send email');
toaster.info('New contacts imported');
toaster.warning('Approaching storage limit');
toaster.loading('Sending emails...');

Examples

Toast Variants

All Variants

Different toast types for different contexts

<div className="flex flex-wrap gap-2">
<Button onClick={() => toaster.success('Saved successfully')}>Success</Button>
<Button onClick={() => toaster.error('Something went wrong')}>Error</Button>
<Button onClick={() => toaster.info('3 new contacts imported')}>Info</Button>
<Button onClick={() => toaster.warning('Storage almost full')}>Warning</Button>
</div>

Best Practices

✓

Keep messages brief

Toast messages should be 1 short sentence. Users scan them quickly.

✓

Use appropriate variants

Match the toast variant to the message type (success, error, info, warning).

✗

Don't use for critical errors

If the error blocks the user's workflow, use an Alert or Dialog instead.

✗

Don't stack too many toasts

Limit visible toasts to 3-5. Too many notifications overwhelm users.

Props

Props

Accessibility

  • Toasts are announced to screen readers via aria-live="polite".
  • Toasts can be dismissed with keyboard (close button or Escape).
  • Auto-dismiss timing should be long enough for reading (minimum 5 seconds).
  • Don't rely solely on toasts for critical information.