unstyled: false, not working in toast.custom()

[programming-with-ia]

Describe the feature / bug 📝:

unstyled: false, not working in toast.custom()

toast.custom((id)=> (
<div className='flex gap-2'>
  <div className='inline-flex'>
   message
  </div>
  <Button onClick={()=>toast.dismiss(id)}>
    Close
  </Button>
</div>
), {unstyled: false})

[srkuleo]

Having the same issue!

[programming-with-ia]

Having the same issue!

@srkuleo

use directly toast()
more info

[srkuleo]

Having the same issue!

@srkuleo

use directly toast() more info

I don't quite understand what you are referring to. Currently I am rendering my toasts as part of a client actions in Next.js depending on what response is being returned from the server action. For example res.status === "success-redirect" would allow me to add Link anchor while regular "success" or "error" would render Close button.

import Link from "next/link";
import debounce from "lodash.debounce";
import { toast } from "sonner";

// Accepts 1-3 args
// - message to be rendered inside toast
//   Optional - if toast should redirect:
// - path - user is being redirected to after clicking the button inside toast
// - linkText - text to be rendered as the redirect button

export const showToast = debounce(
  (message: string, path?: string, linkText?: string) =>
    toast.custom(
      (t) => (
        <div className="select-none pb-8">
          <div className="flex items-center justify-between rounded-lg bg-white p-4 text-sm shadow-lg ring-[1.5px] ring-slate-400/55 dark:bg-slate-900 dark:shadow-black dark:ring-slate-800">
            <div className="flex max-w-[75%] items-center gap-1.5">
              <p className="font-manrope text-slate-600 dark:text-slate-200">
                {message}
              </p>
            </div>

            {path && linkText ? (
              <Link
                href={path}
                onClick={() => toast.dismiss(t)}
                className="text-center font-semibold text-green-500"
              >
                {linkText}
              </Link>
            ) : (
              <button
                onClick={() => toast.dismiss(t)}
                className="text-center font-semibold text-green-500"
              >
                Close
              </button>
            )}
          </div>
        </div>
      ),
      { unstyled: true },
    ),
  250,
);

While I was able to achieve my custom look, I still couldn't get rid of padding / inset on X axis. Here is the picture:

I would like it removed so I can make it smaller, almost touching edges of the screen.

[programming-with-ia]

example of close button

for custom styling check-out globals.css

if you find something helpful please follow me and star my repo 😊