@monetr/notify

    Variants

    Five built-in variants. The variant drives the accent color on the type pip and the progress rail.

    import { useSnackbar } from '@monetr/notify';

function Example() {
  const { enqueueSnackbar } = useSnackbar();
  return (
    <>
      <button onClick={() => enqueueSnackbar('Hi', { variant: 'default' })}>Default</button>
      <button onClick={() => enqueueSnackbar('Saved', { variant: 'success' })}>Success</button>
      <button onClick={() => enqueueSnackbar('Failed', { variant: 'error' })}>Error</button>
      <button onClick={() => enqueueSnackbar('Heads up', { variant: 'warning' })}>Warning</button>
      <button onClick={() => enqueueSnackbar('FYI', { variant: 'info' })}>Info</button>
    </>
  );
}

    Accessibility

    The variant controls the ARIA live-region role:

    Variantrolearia-live
    default, success, infostatuspolite
    error, warningalertassertive

    Errors and warnings interrupt screen readers; the others are queued behind whatever is currently being read.

    Theming variant accents

    Override the variant colors via CSS custom properties on :root or any ancestor:

    :root {
  --monetr-notification-success: #16a34a;
  --monetr-notification-error: #dc2626;
  --monetr-notification-warning: #ca8a04;
  --monetr-notification-info: #2563eb;
}