Polish

emilkowalski · Nov 20, 2023 · a192b37 · a192b37
1 parent b5024f8
commit a192b37
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/src/index.tsx b/src/index.tsx
@@ -239,7 +239,14 @@ const Toast = (props: ToastProps) => {
       role="status"
       tabIndex={0}
       ref={toastRef}
-      className={cn(className, toastClassname, classNames?.toast, toast?.classNames?.toast)}
+      className={cn(
+        className,
+        toastClassname,
+        classNames?.toast,
+        toast?.classNames?.toast,
+        classNames?.[toastType],
+        toast?.classNames?.[toastType],
+      )}
       data-sonner-toast=""
       data-styled={!Boolean(toast.jsx || toast.unstyled)}
       data-mounted={mounted}

diff --git a/src/types.ts b/src/types.ts
@@ -19,6 +19,10 @@ export interface ToastClassnames {
   closeButton?: string;
   cancelButton?: string;
   actionButton?: string;
+  success?: string;
+  error?: string;
+  info?: string;
+  warning?: string;
 }
 
 export interface ToastT {

diff --git a/website/src/pages/styling.mdx b/website/src/pages/styling.mdx
@@ -58,6 +58,21 @@ toast('Hello World', {
 });
 ```
 
+Styling per toast type is also possible.
+
+```jsx
+<Toaster
+  toastOptions={{
+    classNames: {
+      error: '!bg-red-400',
+      success: '!text-green-400',
+      warning: '!text-yellow-400',
+      info: '!bg-blue-400',
+    },
+  }}
+/>
+```
+
 ## No styles
 
 You can also disable default styles by going headless.