Skip to content

Add close buttons to toasts #2023

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusmarminge merged 17 commits into from
Apr 21, 2026
Merged

Add close buttons to toasts #2023

Changes from 2 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
4857e28
Add close buttons to toasts
noxire-dev Apr 14, 2026
b54ce34
Position dismiss button top-right per reviewer feedback
noxire-dev Apr 16, 2026
d5838a4
Reflow toast stack immediately when a toast dismisses
noxire-dev Apr 17, 2026
554d1dc
Merge branch 'main' into feature/toast-dismiss-button
noxire-dev Apr 17, 2026
f144438
Preserve ending toast's original slot so non-front dismissals exit st…
noxire-dev Apr 17, 2026
0cc1457
Merge branch 'upstream/main' into feature/toast-dismiss-button
noxire-dev Apr 17, 2026
6041bcd
Merge branch 'main' into feature/toast-dismiss-button
noxire-dev Apr 17, 2026
cba132f
Merge branch 'pingdotgg:main' into feature/toast-dismiss-button
noxire-dev Apr 18, 2026
de14ac4
Merge branch 'main' into feature/toast-dismiss-button
juliusmarminge Apr 20, 2026
ed7988a
Fix server bin entrypoint path
juliusmarminge Apr 20, 2026
1d2fa3a
Add dismiss support to thread-scoped toasts
juliusmarminge Apr 20, 2026
0c6b7fc
Remove accidentally-shipped /dev/toast playground route
noxire-dev Apr 20, 2026
ae2e42f
Fix connection toast layout and suppress copy button on status errors
noxire-dev Apr 20, 2026
a0306ed
Harden stackedThreadToast helper and cover all connection toasts
noxire-dev Apr 20, 2026
a54dd77
Address Bugbot findings on stackedThreadToast hardening
noxire-dev Apr 20, 2026
a6ca725
Expose stackedThreadToast in GitActionsControl browser test mock
noxire-dev Apr 20, 2026
1250b8a
Extract shared ToastBodyContent helper in toast.tsx
noxire-dev Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 62 additions & 35 deletions apps/web/src/components/ui/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
InfoIcon,
LoaderCircleIcon,
TriangleAlertIcon,
XIcon,
} from "lucide-react";

import { cn } from "~/lib/utils";
Expand Down Expand Up @@ -302,9 +303,21 @@ function Toasts({ position = "top-right" }: { position: ToastPosition }) {
dismissAfterVisibleMs={toast.data?.dismissAfterVisibleMs}
toastId={toast.id}
/>
<button
aria-label="Dismiss notification"
className={cn(
buttonVariants({ size: "icon-xs", variant: "ghost" }),
"absolute top-2 right-2 z-10 size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground",
)}
data-slot="toast-close"
onClick={() => toastManager.close(toast.id)}
type="button"
>
<XIcon className="size-3" />
</button>
Comment thread
cursor[bot] marked this conversation as resolved.
Outdated
<Toast.Content
className={cn(
"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-expanded:opacity-100",
"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 pr-8 py-3 text-sm transition-opacity duration-250 data-expanded:opacity-100",
hideCollapsedContent &&
"not-data-expanded:pointer-events-none not-data-expanded:opacity-0",
)}
Expand Down Expand Up @@ -402,44 +415,58 @@ function AnchoredToasts() {
<Toast.Title data-slot="toast-title" />
</Toast.Content>
) : (
<Toast.Content className="pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm">
<div className="flex min-w-0 flex-1 gap-2">
{Icon && (
<div
className="[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
data-slot="toast-icon"
>
<Icon className="in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" />
</div>
<>
<button
aria-label="Dismiss notification"
className={cn(
buttonVariants({ size: "icon-xs", variant: "ghost" }),
"absolute top-2 right-2 z-10 size-5 rounded-sm p-0 text-muted-foreground hover:text-foreground",
)}

<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<div className="flex items-center gap-1">
<Toast.Title
className="min-w-0 wrap-break-word font-medium"
data-slot="toast-title"
data-slot="toast-close"
onClick={() => anchoredToastManager.close(toast.id)}
type="button"
>
<XIcon className="size-3" />
</button>
<Toast.Content className="pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 pr-8 py-3 text-sm">
<div className="flex min-w-0 flex-1 gap-2">
{Icon && (
<div
className="[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
data-slot="toast-icon"
>
<Icon className="in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" />
</div>
)}

<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<div className="flex items-center gap-1">
<Toast.Title
className="min-w-0 wrap-break-word font-medium"
data-slot="toast-title"
/>
{toast.type === "error" &&
typeof toast.description === "string" &&
!toast.data?.hideCopyButton && (
<CopyErrorButton text={toast.description} />
)}
</div>
<Toast.Description
className="min-w-0 select-text wrap-break-word text-muted-foreground"
data-slot="toast-description"
/>
{toast.type === "error" &&
typeof toast.description === "string" &&
!toast.data?.hideCopyButton && (
<CopyErrorButton text={toast.description} />
)}
</div>
<Toast.Description
className="min-w-0 select-text wrap-break-word text-muted-foreground"
data-slot="toast-description"
/>
</div>
</div>
{toast.actionProps && (
<Toast.Action
className={cn(buttonVariants({ size: "xs" }), "shrink-0")}
data-slot="toast-action"
>
{toast.actionProps.children}
</Toast.Action>
)}
</Toast.Content>
{toast.actionProps && (
<Toast.Action
className={cn(buttonVariants({ size: "xs" }), "shrink-0")}
data-slot="toast-action"
>
{toast.actionProps.children}
</Toast.Action>
)}
</Toast.Content>
</>
)}
</Toast.Root>
</Toast.Positioner>
Expand Down
Loading