react-hot-toast

yarn add react-hot-toast

import { AppProps } from 'next/app';
import { Toaster } from 'react-hot-toast';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <div>
      <Component {...pageProps} />
      <Toaster
        toastOptions={{
          className: 'bg-gray-50 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
          position: 'bottom-right',
        }}
      />
    </div>
  );
}

toast.success('successful');
toast.error('failed');

toast((action) => (
  <Toast
    title="Dark theme enabled"
    buttonText="Undo"
    action={() => {
      actionImpl.command?.history?.undo();
      toast.dismiss(action.id);

      toast((undoAction) => (
        <Toast
          title="Dark theme undone"
          buttonText="Redo"
          action={() => {
            actionImpl.command?.history?.redo();
            toast.dismiss(undoAction.id);
          }}
        />
      ));
    }}
  />
));

function Toast({
  title,
  buttonText,
  action,
}: {
  title: string;
  buttonText: string;
  action: () => void;
}) {
  return (
    <div className="flex items-center gap-4 text-sm">
      <span>{title}</span>
      <button
        onClick={action}
        className={$(
          'cursor-pointer rounded py-1 px-2',
          'bg-gray-150 active:bg-gray-200 dark:bg-gray-700 dark:active:bg-gray-600',
        )}
      >
        {buttonText}
      </button>
    </div>
  );
}