[PR #26] feat: add optional close button for toast dismissal #27

New issue

Open

opened 2026-03-02 05:16:38 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 05:16:38 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hiaaryan/sileo/pull/26
Author: @lubauss
Created: 2/21/2026
Status: 🔄 Open

Base: main ← Head: feat/close-button

📝 Commits (1)

478e1f9 feat: add optional close button for toast dismissal

📊 Changes

3 files changed (+58 additions, -0 deletions)

View changed files

📝 src/sileo.tsx (+25 -0)
📝 src/styles.css (+30 -0)
📝 src/toast.tsx (+3 -0)

📄 Description

Summary

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.

Problem

Currently the only way to dismiss a toast (besides waiting for auto-dismiss) is swiping. Desktop users expect a close button, especially for sticky toasts (duration: null) that don't auto-dismiss.

Solution

New `closeButton` prop

<Toaster closeButton />

When enabled, each toast renders an X button (using the existing X icon) in the top-right corner. The button:

Is hidden by default, fades in on toast hover
Calls onDismiss() on click
Is fully accessible: role="button", tabIndex, aria-label, keyboard support (Enter/Space)
Does not interfere with swipe-to-dismiss

CSS

[data-sileo-close] {
  position: absolute;
  top: 0; right: 0; z-index: 30;
  opacity: 0;
  transition: opacity 150ms ease;
}
[data-sileo-toast]:hover [data-sileo-close] { opacity: 1; }

Files Changed

File	Changes
`src/toast.tsx`	Add `closeButton` prop to `SileoToasterProps`, pass to `<Sileo>`
`src/sileo.tsx`	Accept `closeButton` prop, render X button with a11y attributes
`src/styles.css`	Add `[data-sileo-close]` styles with hover reveal

Backward Compatibility

closeButton defaults to false — no visual change unless opted in
Swipe-to-dismiss still works alongside the button

Testing

<Toaster closeButton /> — hover over a toast, X button should fade in
Click X — toast should dismiss
Tab to button, press Enter — should dismiss
Verify swipe-to-dismiss still works
Without closeButton prop — verify no X button appears

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hiaaryan/sileo/pull/26 **Author:** [@lubauss](https://github.com/lubauss) **Created:** 2/21/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `feat/close-button` --- ### 📝 Commits (1) - [`478e1f9`](https://github.com/hiaaryan/sileo/commit/478e1f9248f870ce524b0886967f7edf9314a549) feat: add optional close button for toast dismissal ### 📊 Changes **3 files changed** (+58 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `src/sileo.tsx` (+25 -0) 📝 `src/styles.css` (+30 -0) 📝 `src/toast.tsx` (+3 -0) </details> ### 📄 Description ## Summary 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. ## Problem Currently the only way to dismiss a toast (besides waiting for auto-dismiss) is swiping. Desktop users expect a close button, especially for sticky toasts (`duration: null`) that don't auto-dismiss. ## Solution ### New `closeButton` prop ```tsx <Toaster closeButton /> ``` When enabled, each toast renders an X button (using the existing `X` icon) in the top-right corner. The button: - Is hidden by default, fades in on toast hover - Calls `onDismiss()` on click - Is fully accessible: `role="button"`, `tabIndex`, `aria-label`, keyboard support (Enter/Space) - Does not interfere with swipe-to-dismiss ### CSS ```css [data-sileo-close] { position: absolute; top: 0; right: 0; z-index: 30; opacity: 0; transition: opacity 150ms ease; } [data-sileo-toast]:hover [data-sileo-close] { opacity: 1; } ``` ## Files Changed | File | Changes | |------|---------| | `src/toast.tsx` | Add `closeButton` prop to `SileoToasterProps`, pass to `<Sileo>` | | `src/sileo.tsx` | Accept `closeButton` prop, render X button with a11y attributes | | `src/styles.css` | Add `[data-sileo-close]` styles with hover reveal | ## Backward Compatibility - `closeButton` defaults to `false` — no visual change unless opted in - Swipe-to-dismiss still works alongside the button ## Testing 1. `<Toaster closeButton />` — hover over a toast, X button should fade in 2. Click X — toast should dismiss 3. Tab to button, press Enter — should dismiss 4. Verify swipe-to-dismiss still works 5. Without `closeButton` prop — verify no X button appears --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>