From 478e1f9248f870ce524b0886967f7edf9314a549 Mon Sep 17 00:00:00 2001
From: lubauss <luismi705@gmail.com>
Date: Sat, 21 Feb 2026 19:53:31 +0100
Subject: [PATCH] feat: add optional close button for toast dismissal

Add a `closeButton` prop to `<Toaster>` that renders an X dismiss
button on each toast, visible on hover. This provides an alternative
to swipe-to-dismiss for desktop users, especially useful for sticky
toasts (duration: null) that don't auto-dismiss.

- closeButton defaults to false (no visual change unless opted in)
- Accessible: role="button", tabIndex, aria-label, keyboard support
- Swipe-to-dismiss still works alongside the button
---
 src/sileo.tsx  | 25 +++++++++++++++++++++++++
 src/styles.css | 30 ++++++++++++++++++++++++++++++
 src/toast.tsx  |  3 +++
 3 files changed, 58 insertions(+)

diff --git a/src/sileo.tsx b/src/sileo.tsx
index 0a7336f..9b0977a 100644
--- a/src/sileo.tsx
+++ b/src/sileo.tsx
@@ -65,6 +65,7 @@ interface SileoProps {
 	canExpand?: boolean;
 	interruptKey?: string;
 	refreshKey?: string;
+	closeButton?: boolean;
 	onMouseEnter?: MouseEventHandler<HTMLButtonElement>;
 	onMouseLeave?: MouseEventHandler<HTMLButtonElement>;
 	onDismiss?: () => void;
@@ -133,6 +134,7 @@ export const Sileo = memo(function Sileo({
 	canExpand,
 	interruptKey,
 	refreshKey,
+	closeButton = false,
 	onMouseEnter,
 	onMouseLeave,
 	onDismiss,
@@ -652,6 +654,29 @@ export const Sileo = memo(function Sileo({
 				</div>
 			</div>
 
+			{closeButton && onDismiss && (
+				<div
+					data-sileo-close
+					role="button"
+					tabIndex={0}
+					aria-label="Close notification"
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						onDismiss();
+					}}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.preventDefault();
+							e.stopPropagation();
+							onDismiss();
+						}
+					}}
+				>
+					<X />
+				</div>
+			)}
+
 			{hasDesc && (
 				<div data-sileo-content data-edge={expand} data-visible={open}>
 					<div
diff --git a/src/styles.css b/src/styles.css
index 5b15197..01d5952 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -455,6 +455,36 @@
 	}
 }
 
+/* ----------------------------- Close Button ------------------------------ */
+
+[data-sileo-close] {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 30;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--sileo-height);
+	height: var(--sileo-height);
+	padding: 0;
+	border: 0;
+	background: transparent;
+	cursor: pointer;
+	pointer-events: auto;
+	color: rgba(0, 0, 0, 0.4);
+	opacity: 0;
+	transition: opacity 150ms ease;
+}
+
+[data-sileo-toast]:hover [data-sileo-close] {
+	opacity: 1;
+}
+
+[data-sileo-close]:hover {
+	color: rgba(0, 0, 0, 0.7);
+}
+
 @media (prefers-reduced-motion: reduce) {
 	*,
 	*::before,
diff --git a/src/toast.tsx b/src/toast.tsx
index 9256a98..cc53306 100644
--- a/src/toast.tsx
+++ b/src/toast.tsx
@@ -47,6 +47,7 @@ export interface SileoToasterProps {
 	position?: SileoPosition;
 	offset?: SileoOffsetValue | SileoOffsetConfig;
 	options?: Partial<SileoOptions>;
+	closeButton?: boolean;
 }
 
 /* ------------------------------ Global State ------------------------------ */
@@ -218,6 +219,7 @@ export function Toaster({
 	position = "top-right",
 	offset,
 	options,
+	closeButton = false,
 }: SileoToasterProps) {
 	const [toasts, setToasts] = useState<SileoItem[]>(store.toasts);
 	const [activeId, setActiveId] = useState<string>();
@@ -423,6 +425,7 @@ export function Toaster({
 									onMouseEnter={h.enter}
 									onMouseLeave={h.leave}
 									onDismiss={h.dismiss}
+									closeButton={closeButton}
 								/>
 							);
 						})}