Add close buttons to toasts

[noxire-dev]

Summary

• Add a close (X) button to standard and anchored toasts for one-click dismissal
• Improves accessibility for keyboard/mouse users who can't easily swipe-to-dismiss
• Uses existing XIcon from lucide-react, styled consistently with CopyErrorButton
• No changes to existing swipe or auto-dismiss behavior

Test plan

• Trigger toasts of each type (info, success, warning, error, loading)
• Verify the X button appears on the right side of each toast
• Verify clicking X immediately dismisses the toast
• Verify swipe-to-dismiss still works as before
• Verify toasts with action buttons show both the action and X button
• Verify anchored (non-tooltip) toasts also have the X button
• Verify tooltip-style anchored toasts do NOT have the X button

---

Note

Low Risk
UI-only change confined to toast rendering and styling; minimal behavioral impact beyond enabling manual dismissal.

Overview
Adds an explicit X close button to both standard stacked toasts and non-tooltip anchored toasts, enabling one-click dismissal via toastManager.close(...) / anchoredToastManager.close(...).

Updates toast layout spacing (pr-8) to make room for the new top-right close affordance while keeping existing action buttons and auto/swipe dismissal behavior intact.

^{Reviewed by Cursor Bugbot for commit b54ce34. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add close buttons to toasts in the web UI

Adds a dismiss button (X icon) to each toast in both the Toasts and AnchoredToasts components in toast.tsx. Clicking the button calls toastManager.close or anchoredToastManager.close with the toast's ID. Right padding on Toast.Content is increased (pr-8) to prevent content from overlapping the button.

^{Macroscope summarized b54ce34.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 2c98c828-b4d3-4c35-afa3-5a4a7024b445

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This UI change adds dismiss buttons to toasts, but an unresolved review comment identifies a medium-severity bug where the close button doesn't properly hide during toast stack collapse/expand transitions, remaining visible and interactive when it shouldn't be.

^{You can customize Macroscope's approvability policy. Learn more.}

[juliusmarminge]

screenshots plss

[noxire-dev]

sorry for the missing screenshots

the last picture 3 toast at the same time so its not a dup screenshots it just looks like that

[kendalled]

i did a more focused version of this fix specifically for the 'slow requests' toast, see pr #2040

[kendalled]

Hey can you reference my closed pr #2040 for styling? I think this fits the design language of t3 code a lot better. It looks like your dismiss button is centered vertically which is weird. Below is the way it looks on my closed pr. just incorporate that styling.

@juliusmarminge @noxire-dev

[juliusmarminge]

Hey can you reference my closed pr #2040 for styling? I think this fits the design language of t3 code a lot better. It looks like your dismiss button is centered vertically which is weird. Below is the way it looks on my closed pr. just incorporate that styling.

@juliusmarminge @noxire-dev

yea top-right definitely looks better. should also make sure the "Copy Error" button aligns well

Dismissing prior approval to re-evaluate b54ce34

[noxire-dev]

thank you for the feedback, I tweak the styling is this verison better ? if so i can update the branch @juliusmarminge

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit b54ce34. Configure here.}

[cursor]

Close button ignores collapsed toast opacity/pointer-events

Medium Severity

The close button is placed outside Toast.Content as a sibling inside Toast.Root. When toasts are stacked, hideCollapsedContent applies not-data-expanded:opacity-0 and not-data-expanded:pointer-events-none to Toast.Content to hide non-front toasts' content during the collapsed state. Because the close button is not inside Toast.Content, it doesn't receive these classes — it stays fully opaque and interactive while the rest of the toast content is hidden/fading. During expand/collapse transitions of the stack, close buttons on non-front toasts appear instantly while content fades in over 250ms, and remain visible and clickable while content fades out.

 

^{Reviewed by Cursor Bugbot for commit b54ce34. Configure here.}