toast

Imperative global toast notifications with stacking, placement and promise support.

An imperative notification system: call toast.success(…) from anywhere and a <Toaster /> placed in your app renders the message. No declarative state needed.

Installation

pnpm add @fluixi/toast

Setup

Place <Toaster /> once near the root of your app:

import { Toaster } from '@fluixi/toast';

<Toaster />

Usage

import { toast } from '@fluixi/toast';

// Simple messages
toast.success('Saved!');
toast.error('Something went wrong.');
toast.warning('Low disk space.');
toast.info('Update available.');

// With description
toast.success('File uploaded', { description: 'report.pdf · 2.4 MB' });

// Dismissible / persistent
const id = toast.loading('Uploading…');
toast.dismiss(id);

// Promise shorthand
toast.promise(saveData(), {
  loading: 'Saving…',
  success: 'Saved!',
  error: 'Failed to save.',
});

// Update
const id = toast('Processing…');
toast.update(id, { title: 'Done!', type: 'success' });

Toaster props

Toast options

duration, description, type, placement (top-left | top-center | top-right | bottom-left | bottom-center | bottom-right), render (fully custom JSX), action button.

Parts

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.