Skip to main content

Toast action supports forwarding actionProps to the underlying button (WEB-1181)

Version: 0.6.7 · Type: ✨ Feature

WEB-1181

Problem

ToastActionConfig (a public type, re-exported from Toast.tsx) previously only accepted { label, onClick }, and the action button's variant / size were hardcoded inside ToastItem. Callers — for example AI Feedback toasts — could not customize the action button (custom variant, aria-label, data-testid, etc.).

Changed Files

  • packages/design/src/components/Toast/toast-manager.ts
  • packages/design/src/components/Toast/ToastItem.tsx
  • packages/design/src/components/Toast/__tests__/Toast.test.tsx

Changes

  1. Added an optional actionProps field to ToastActionConfig, forwarded onto the underlying Button:
    • Type: Omit<ButtonProps, 'children' | 'onClick'> & { [key: `data-${string}`]: string | number | boolean | undefined }; the data-* index signature follows the existing Dialog okButtonProps convention.
    • Excludes children (carried by label) and onClick (composed by Toast as onClick + auto-close, and therefore not overridable).
  2. In ToastItem's renderActionButton, {...config.actionProps} is spread after the default variant / size (so callers can override them) but before the composed onClick (so the click + auto-close behavior can never be overridden).
  3. Unit test: an aiFeedback toast overrides the action to variant="primary" + data-testid via actionProps, asserting the class is applied and onClick still fires.

Usage

toast.aiFeedback('...', {
action: {
label: 'Regenerate',
onClick: handleRegenerate,
actionProps: { variant: 'primary', 'aria-label': 'Regenerate', 'data-testid': 'ai-regenerate' },
},
});