A toast variant with a trailing action button used for undo or in-flight confirmations.
Consolidate — merged into Toast
This component no longer exists on its own. Its trailing button is now a
hasTrailingAction boolean on Toast (node 4915:25141), with the button in a swappable addon slot. Assessment for this pattern lives on the Toast page.In Context
The actionable toast appears after reversible operations — "Transfer sent · Undo", "Message failed · Retry", "Photo uploaded · View". The action button sits right-aligned, tappable without dismissing the toast. Auto-dismiss is suppressed while an action is present.
Live Preview
Add label here
Add description here.
Label
Properties
Type
Description
DS Health
Reusable
Partial
Historical rating from the standalone assessment. This component is merged into Toast — see that page for the current DS Health.
Self-contained
Warn
Historical rating from the standalone assessment. This component is merged into Toast — see that page for the current DS Health.
Consistent
Fail
Historical rating from the standalone assessment. This component is merged into Toast — see that page for the current DS Health.
Composable
Warn
Historical rating from the standalone assessment. This component is merged into Toast — see that page for the current DS Health.
Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Action tap | Yes | Yes | Button instance embedded | The deprecated Button - Small/XS is the action surface. Only one fixed appearance; consumers can't disable or show a loading spinner on the action. |
| Whole-container tap | N/A | N/A | Root is a <button> in some variants | The default, description=no variant wraps the whole toast in a button element, overlapping the inner action — tap target is unclear. |
| Auto-dismiss when action present | N/A | N/A | Not annotated | Toasts with actions should stay visible until the action is taken or explicitly dismissed. Not spec'd. |
| Action loading / disabled state | N/A | N/A | Not modeled | "Retry" actions often need a loading state after tap. No provision in the component. |
| A11y — action label | N/A | N/A | Text "Label" | The default text in the instance is literally "Label". Needs a content contract and an accessibility label override. |
Issues
- Merged into Toast. v2.0: Confirmed by the component owner — Toast - With Button no longer exists as a standalone component. Its trailing button is now a
hasTrailingActionboolean on Toast (node4915:25141), with the button itself living in anaddonslot so it can be swapped without detaching. This page is kept as a pointer; all assessment for this pattern lives on Toast. (Family) C4 · Native Mappability
1.0.1 — September 2026Patch
Documentation backfill · node 27:53205
Resolved issues recorded. 1 resolved issue on the Overview tab had no changelog row: Merged into Toast.
Docs1.0.0 — April 2026Major
Initial Assessment · node 27:53205
Verdict: Consolidate — Fold into the base Toast. Action becomes an optional slot; supporting text becomes an optional content slot. Remove this sibling from the family. Open
FamilyC1 — Duplicate component — Exists to add an action slot to Toast. Collapse into base Toast with
C1action?: EBToastAction. Width drifts from base (330 vs. 312). OpenC2 — Axis drift —
C2type=default|light here vs. type=default|pending|error + theme=default|light|dark on base Toast. description=yes|no should be supportingText?: String. OpenC4 — Deprecated Button embedded — Action surface uses
C4.[DEPRECATED] Button - Small/XS (node 21:164490), slated for deletion Aug 22, 2025. Rebind to Button - XSmall before migration. OpenC5 — Tap conflict + missing action states —
C5description=no variants wrap the root in a <button> overlapping the inner action. No pressed/disabled/loading states for the action. OpenC6 — No icon axis — Silently drops the
C6With Icon axis that base Toast exposes. Consolidation recovers it. OpenC7 — Code Connect — Blocked on family consolidation. No standalone entry expected. Open
C7