Toast

v1.0.0

Floating toast notifications. Pair with useToast for state management.

Import

import { Toast } from '@meteorack/sdk-react';

How To Use It

Use it for short-lived success, warning, or error feedback after a user-triggered action completes.
Mount one toast container near the page root and drive it with the useToast hook rather than rendering ad hoc notification markup per button.

Works Well With

Button Notice AppShell

Props

toasts: ToastItem[]

Ordered toast items to render in the stack.

onDismiss: (id: string) => void

Called when a toast is dismissed or auto-expires.

position?: 'top-right' | 'bottom-right' | 'bottom-left'

Controls the screen corner where the toast stack appears.

Example

Toast.tsx

import { Toast, useToast, Button } from '@meteorack/sdk-react';

export function SaveAction() {
  const { toasts, addToast, dismissToast } = useToast();

  return (
    <>
      <Button
        variant="primary"
        onClick={() => addToast('Settings saved', 'success')}
      >
        Save
      </Button>

      <Toast
        toasts={toasts}
        onDismiss={dismissToast}
        position="top-right"
      />
    </>
  );
}

PreviousContentContainer NextConfirmDialog