Skip to main content

Toast per-item closeButton prop

Version: 0.2.0 · Type: ✨ Feature

Problem​

Whether the close button was shown could previously only be decided implicitly by the Toaster container-level closeButton plus shape inference (only Alert / with-actions / aiFeedback shapes showed it); an individual toast had no way to control it explicitly. At the same time, the "shows close button by default" case in Toast.config.test.tsx used a plain success Message, which conflicted with the shape rule and caused the test to fail.

Changed Files​

  • packages/design/src/components/Toast/toast-manager.ts
  • packages/design/src/components/Toast/ToastItem.tsx
  • packages/design/src/components/Toast/Toast.tsx
  • packages/design/src/components/Toast/Toast.config.test.tsx
  • packages/design-site/docs/components/patterns/feedbacks-toast.mdx (English)
  • packages/design-site/i18n/zh-CN/docusaurus-plugin-content-docs/current/components/patterns/feedbacks-toast.mdx (Chinese)

Changes​

  • ToastOptions / ToastRecord gain an optional closeButton?: boolean, and create passes it through to the record.
  • The ToastItem close-button decision changes to showClose = toast.closeButton ?? (closeButton && (isAlert || hasActions || aiFeedback)): when an individual toast sets it explicitly, it fully overrides both the container switch and the shape inference (true shows it in any shape, false hides it in any shape); when not passed, it falls back to the original container + shape rule.
  • Toast.tsx JSDoc adds the closeButton usage and the toast('msg', { closeButton: true }) example.
  • Fixed the config tests: the default / container-hidden cases now use the Alert shape (with description) so they truly hit the shape rule; added three coverage cases — "a plain Message has no close button by default", "closeButton=true forces it to show", "closeButton=false forces it to hide".
  • design-site docs (bilingual) synced: the toast functions table adds rows for closeButton: true/false / aiFeedback / loading / id reuse, etc.; the Toaster props table is filled out with the real in-house API (duration / visibleToasts / style); removed legacy descriptions like "wrapped over Sonner / toast.custom() / toastOptions.classNames" (the component long ago migrated to the in-house toast manager).

Notes​

(Linear)