fix(toast): use Button for close control

[mattrothenberg]

Summary

• replace the hand-rolled Toast close control with the Kumo Button component
• keep the close control compact at size-5 while using size="sm" ghost button styling
• use variant accent colors with hover:bg-current/15 so success/error/warning/info toasts avoid muddy gray hover states

Testing

• pnpm --filter @cloudflare/kumo test toast

• pnpm --filter @cloudflare/kumo exec oxlint src/components/toast/toast.tsx

• pnpm --filter @cloudflare/kumo exec tsc --noEmit -p tsconfig.json

• Reviews

• bonk has reviewed the change

• automated review not possible because: small visual component polish requiring human judgment

• Tests

• Tests included/updated

• Automated tests not possible - manual testing has been completed as follows:

• Additional testing not necessary because: existing toast tests, lint, and typecheck cover this small style change

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@600

commit: 9536ea3

[github-actions]

Docs Preview

View docs preview

Commit: 5cc9723

[github-actions]

Visual Regression Report — 3 changed, 9 unchanged

3 screenshot(s) with visual changes:

Toast / Toast Description Only

562 px (0.55%) changed

Before	After	Diff

Toast / Toast Multiple

768 px (0.76%) changed

Before	After	Diff

Toast (Open)

15 px (0%) changed

Before	After	Diff

9 screenshot(s) unchanged

• Toast / Toast Basic
• Toast / Toast Title Only
• Toast / Toast Success
• Toast / Toast Error
• Toast / Toast Warning
• Toast / Toast Info
• Toast / Toast Custom Content
• Toast / Toast Actions
• Toast / Toast Promise

---

Generated by Kumo Visual Regression

[mattrothenberg]

/bonk review and approve

[ask-bonk]

LGTM. Clean, focused change.

Code review:

• Button integration: Using Button with variant="ghost" + shape="square" + size="sm" is the right call — avoids duplicating focus/press states and stays consistent with the rest of the library. The render prop composition with Toast.Close works correctly.
• Styling: size-5 override on top of size="sm" keeps the compact footprint. hover:bg-current/15 is a nice touch — it tints the hover state to match the toast variant without muddying the colors. No raw Tailwind colors, no dark: prefix. ✅
• cn() usage: Classes are composed properly with cn(), and TOAST_CLOSE_CLASSES correctly overrides the default text color via tailwind-merge. ✅
• Accessibility: aria-label="Close" is preserved. ✅
• Tests: PR description confirms existing toast tests, lint, and typecheck pass. Visual regression diffs are limited to expected toast variants (0.55%–0.9% pixel change). ✅
• Changeset: Patch changeset present and properly scoped to @cloudflare/kumo. ✅

Non-blocking nit: KUMO_TOAST_VARIANTS.close.classes still documents the old hand-rolled button styles (hover:bg-kumo-fill-hover hover:text-kumo-default). Consider updating it to reflect the new Button-based implementation so Figma plugin metadata stays in sync.

Approving.

github run