Before submitting
Area
apps/web
Problem or use case
Toasts can currently only be dismissed by swiping (or waiting for auto-dismiss). There is no visible close button.
This would be a small, additive change to apps/web/src/components/ui/toast.tsx with no impact on the existing swipe behavior or auto-dismiss logic.
Proposed solution
Add a <Toast.Close> button (the primitive already exists in @base-ui/react) to the toast content area. A small X icon in the top-right corner, styled consistently with the existing CopyErrorButton — low-opacity by default, full opacity on hover.
Why this matters
Accessibility: Keyboard and screen reader users have no way to manually dismiss a toast.
Discoverability: Desktop mouse users typically expect an X button on dismissable notifications. Swipe-to-dismiss is a mobile pattern that isn't obvious on desktop.
Convenience: Having to click-drag across the toast to dismiss feels heavier than clicking a small button.
Smallest useful scope
Aligns with WCAG 2.1 dismissable content guidance
Standard UX convention for toast/notification components
The building block (Toast.Close) is already available in the UI library — no new dependencies
Happy to submit a PR if this sounds reasonable.
Alternatives considered
No response
Risks or tradeoffs
No response
Examples or references
No response
Contribution
Before submitting
Area
apps/web
Problem or use case
Toasts can currently only be dismissed by swiping (or waiting for auto-dismiss). There is no visible close button.
This would be a small, additive change to apps/web/src/components/ui/toast.tsx with no impact on the existing swipe behavior or auto-dismiss logic.
Proposed solution
Add a <Toast.Close> button (the primitive already exists in @base-ui/react) to the toast content area. A small X icon in the top-right corner, styled consistently with the existing CopyErrorButton — low-opacity by default, full opacity on hover.
Why this matters
Accessibility: Keyboard and screen reader users have no way to manually dismiss a toast.
Discoverability: Desktop mouse users typically expect an X button on dismissable notifications. Swipe-to-dismiss is a mobile pattern that isn't obvious on desktop.
Convenience: Having to click-drag across the toast to dismiss feels heavier than clicking a small button.
Smallest useful scope
Aligns with WCAG 2.1 dismissable content guidance
Standard UX convention for toast/notification components
The building block (Toast.Close) is already available in the UI library — no new dependencies
Happy to submit a PR if this sounds reasonable.
Alternatives considered
No response
Risks or tradeoffs
No response
Examples or references
No response
Contribution