Toast — Design System

Toast is built on sonner by Emil Kowalski, themed with MiHCM tokens. Each demo below mounts its own <Toaster />; in a real app you'd mount one <Toaster /> at the layout root.

Default toast

import { toast } from '@mihcm/ui/Toast';
 
toast('Event created', {
  description: 'Your calendar event has been added.',
});

Success toast

toast.success('Profile updated', {
  description: 'Your changes have been saved successfully.',
});

Error toast

toast.error('Something went wrong', {
  description: 'Could not save your changes. Please try again.',
});

Warning toast

toast.warning('Approaching limit', {
  description: 'You have used 92% of your monthly quota.',
});

Toast with undo action

toast('Message archived', {
  description: 'The conversation has been moved to archive.',
  action: {
    label: 'Undo',
    onClick: () => restoreMessage(),
  },
});

Short-lived toast

toast('Copied to clipboard', { duration: 2000 });

Loading toast (updates in place)

const id = toast.loading('Compiling…');
// later, after the work completes:
toast.success('Compiled', { id });

Promise toast — automatic lifecycle

toast.promise(savePost(), {
  loading: 'Saving…',
  success: (data) => `Saved ${data.name}`,
  error: (err) => `Failed: ${err.message}`,
});

Action + cancel

toast('Delete this draft?', {
  description: "This can't be undone.",
  action: { label: 'Delete', onClick: doDelete },
  cancel: { label: 'Cancel', onClick: () => {} },
});

Custom JSX

toast.custom((id) => (
  <div className="flex items-start gap-3 rounded-lg border border-border bg-card p-4 shadow-lg">
    <SuccessTick />
    <div className="flex-1">
      <div className="font-semibold">Custom JSX toast</div>
      <p className="text-xs text-muted-foreground">
        Anything you can render — full design freedom inside the row.
      </p>
    </div>
    <button onClick={() => toast.dismiss(id)}>Got it</button>
  </div>
));

Rich colors + expand-on-hover

<Toaster richColors expand closeButton visibleToasts={4} />;
 
// Then any of:
toast.success('Saved');
toast.error('Failed');
toast.warning('Be careful');
toast.info('FYI');