ability to dismiss a toast

src/components/close.tsx

@@ -0,0 +1,35 @@
+import { styled } from 'goober';
+
+export interface CloseTheme {
+	primary?: string;
+	secondary?: string;
+}
+
+export const CloseIcon = styled('div')<CloseTheme>`
+  width: 20px;
+  opacity: 1;
+  height: 20px;
+  border-radius: 10px;
+  background:  ${(p) => p.primary || 'transparent'};;
+  position: relative;
+  transform: rotate(45deg);
+	transition: background-color 200ms ease-out;
+
+  &:after,
+  &:before {
+    content: '';
+    animation-delay: 150ms;
+    position: absolute;
+    border-radius: 3px;
+    opacity: 1;
+    background: ${(p) => p.secondary || '#000'};
+    bottom: 9px;
+    left: 4px;
+    height: 2px;
+    width: 12px;
+  }
+
+  &:before {
+    transform: rotate(90deg);
+  }
+`;

src/components/toast-bar.tsx

@@ -4,6 +4,7 @@ import { styled, keyframes } from 'goober';
 import { Toast, ToastPosition, resolveValue, Renderable } from '../core/types';
 import { ToastIcon } from './toast-icon';
 import { prefersReducedMotion } from '../core/utils';
+import { CloseIcon } from "./close";
 
 const enterAnimation = (factor: number) => `
 0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;}
@@ -49,6 +50,7 @@ interface ToastBarProps {
     icon: Renderable;
     message: Renderable;
   }) => Renderable;
+  onDismiss: () => void;
 }
 
 const getAnimationStyle = (
@@ -70,8 +72,9 @@ const getAnimationStyle = (
 };
 
 export const ToastBar: React.FC<ToastBarProps> = React.memo(
-  ({ toast, position, style, children }) => {
+  ({ toast, position, style, children, onDismiss }) => {
     const animationStyle: React.CSSProperties = toast.height
+
       ? getAnimationStyle(
           toast.position || position || 'top-center',
           toast.visible
@@ -84,6 +87,7 @@ export const ToastBar: React.FC<ToastBarProps> = React.memo(
         {resolveValue(toast.message, toast)}
       </Message>
     );
+    const closeIcon = !!toast.canDismiss ? <CloseIcon onClick={onDismiss} /> : null;
 
     return (
       <ToastBarBase
@@ -103,6 +107,7 @@ export const ToastBar: React.FC<ToastBarProps> = React.memo(
           <>
             {icon}
             {message}
+            {closeIcon}
           </>
         )}
       </ToastBarBase>

src/components/toaster.tsx

@@ -6,6 +6,7 @@ import {
   ToastPosition,
   ToastWrapperProps,
 } from '../core/types';
+import { toast } from "../core/toast";
 import { useToaster } from '../core/use-toaster';
 import { prefersReducedMotion } from '../core/utils';
 import { ToastBar } from './toast-bar';
@@ -131,7 +132,13 @@ export const Toaster: React.FC<ToasterProps> = ({
             ) : children ? (
               children(t)
             ) : (
-              <ToastBar toast={t} position={toastPosition} />
+              <ToastBar
+                toast={t}
+                position={toastPosition}
+                onDismiss={() => {
+                  toast.dismiss(t.id);
+                }}
+              />
             )}
           </ToastWrapper>
         );

src/core/toast.ts

@@ -30,6 +30,7 @@ const createToast = (
   pauseDuration: 0,
   ...opts,
   id: opts?.id || genId(),
+  canDismiss: opts?.canDismiss,
 });
 
 const createHandler =

src/core/types.ts

@@ -52,6 +52,7 @@ export interface Toast {
   createdAt: number;
   visible: boolean;
   height?: number;
+  canDismiss?: boolean;
 }
 
 export type ToastOptions = Partial<
@@ -65,6 +66,7 @@ export type ToastOptions = Partial<
     | 'style'
     | 'position'
     | 'iconTheme'
+    | 'canDismiss'
   >
 >;