ui
ui copied to clipboard
shadcn-ui
closeButton prop not working in Sonner
Looks like adding the closeButton prop in Sonner component does not add anything at all. See a demo here:
https://github.com/shadcn-ui/ui/assets/35889246/cdf1a85c-d262-47b5-9d90-cddd184fb7a9
Same result on adding prop as closeButton={true} also
I tried adding the prop and it's appeared :
Code
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Toaster } from "@/components/ui/sonner";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
{children}
<Toaster closeButton />
</body>
</html>
);
}
EDIT
Even when I changed the position it appeared:
@MenaiAla I just realized the close button appears only on hover :). Weird that the documentation of Sonner makes it look like the close button is there always. And in some cases, the hover does not work if there is a sheet UI. I guess it's a problem of Z index.
@MenaiAla I just realized the close button appears only on hover :). Weird that the documentation of Sonner makes it look like the close button is there always. And in some cases, the hover does not work if there is a sheet UI. I guess it's a problem of the Z index.
Yes, I expect that the independent components ( Modal, Dialog, Sheet ) have different Z-index values.