Skip to content

Partially revert issue #224: restore hover-to-show close button behavior on desktop devices #705

@dpkass

Description

@dpkass

I’d like to propose partially reverting issue #224.

The previous behavior should be restored for desktop devices. On mobile it makes sense to keep the button always visible for accessibility and touch targets.

On desktop platforms, especially macOS, this is actually the expected interaction pattern (mirroring the native notification bar behavior), so users are familiar with it.

A reasonable approach would be:

@media (hover: hover) {
  [data-sonner-toast] [data-close-button] {
    opacity: 0;
    visibility: hidden;
  }
  [data-sonner-toast]:hover [data-close-button],
  [data-sonner-toast]:focus-within [data-close-button] {
    opacity: 1;
    visibility: visible;
  }
}

This would reintroduce hover-to-show behavior only for pointer/hover-capable devices, leaving mobile UX unchanged.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions