Toast - With Button — GCash DS Assessment

ConsolidateNot Applicable

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 hasTrailingAction boolean on Toast (node 4915:25141), with the button itself living in an addon slot 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

Types

Default

DES DEV

Confirms a reversible action that the user might want to undo right away — "Removed from favorites", "Transfer sent". Pairs a label and optional description with a trailing action button.

Add label here

Add description here.

Label

Properties

Theme

Description

Properties

Theme default

Description yes

Colors

Background #0A2757

Label #FFFFFF

Description #F6F9FDCC

Button label #005CE5

Button bg #FFFFFF

Layout

Width 330

Padding 16 × 12

Corner radius 8

Button height 24

Typography

Label Proxima Soft Bold · 14 / 16 · +0.25

Description BarkAda Medium · 10 / 15

Button Proxima Soft Bold · 14 / 14 · +0.25

EBToast("Removed from favorites")
    .ebDescription("Tap undo to revert")
    .ebAction("Undo", action: { })

Default — Colors by Theme

Default toast with a trailing action button. Theme axis flips surface + label between Dark and Light.

Role	Token	Theme · Dark	Theme · Light
Surface bg	toast/color/{theme}/bg	#0A2757	#FFFFFF
Border	toast/color/{theme}/border	#E5EBF4	#E5EBF4
Label	toast/color/{theme}/label	#FFFFFF	#0A2757
Description	toast/color/{theme}/description	#F6F9FD @ 80%	#445C85
Action label	toast/color/{theme}/action	#9BC5FD	#005CE5

Property Mapping

This component collapses into the base Toast. Figma properties map to the consolidated Toast API, not to a standalone EBToastWithButton.

Figma Property	SwiftUI	Compose
`Type: default \| light`	`theme: light \| dark` (shared with Toast)	`.ebToastTheme(.dark)`
`Description: yes \| no`	`supportingText?: String` (slot)	`supportingText: String?`
(embedded Button - Small/XS — deprecated)	`action?: ToastAction` (slot)	`action: EBToastAction?`
(implicit label text)	`message: String`	`message: String`
(no icon axis)	`leadingIcon?: Icon` (inherited from Toast)	`leadingIcon: Image?`

Requirement	iOS	Android
Action label	Action passes `accessibilityLabel` through to the inner Button. Default: the visible label.	Action passes `contentDescription` to the inner Button. Default: the visible label.
Live region	Polite announcement; use the Toast's appearance to decide (destructive → assertive).	`LiveRegionMode.Polite` by default; assertive for destructive.
Suppress auto-dismiss	When `action` is non-nil, host overlay keeps the toast on screen until the action is tapped or the user swipes.	`SnackbarDuration.Indefinite` when an action is present.
Action loading state	Swap label for a ProgressView; keep the button reachable for VoiceOver (don't disable mid-announcement).	Swap label for a `CircularProgressIndicator`; set `enabled = false` after the state is announced.
Tap target	Action button must have a ≥ 44 × 44 hit area; the 24 px pill extends via `.contentShape` if visual size is smaller.	Action button must have a ≥ 48 dp touch target; use `Modifier.minimumInteractiveComponentSize()`.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Requires Rework	Separate component for a property slot. Consolidate into base Toast; normalize width from 330 to 312.
C2	Variant & Property Naming	Requires Rework	`type` values drift from base Toast; `description=yes\|no` should be a content slot.
C3	Token Coverage	Ready	Surface, label, description, border tokens all bound via `main/toast/color/{default\|light}/`. Action uses `comp/button-v1/default/`.
C4	Native Mappability	Requires Rework	Action surface uses the deprecated Button - Small/XS; maps cleanly to Snackbar's action slot once migrated.
C5	Interaction State Coverage	Requires Rework	No action states (pressed / disabled / loading); whole-container tap overlaps the inner action.
C6	Asset & Icon Quality	Requires Rework	No leading-icon axis at all — consolidation recovers it from base Toast.
C7	Code Connect Linkability	Not Mapped	Blocked on consolidation — no standalone Code Connect entry; action maps to base Toast's `action` parameter.

Variants Inventory (4 total)

Axes: Type (2) × Description (2) = 4 variants. Flat matrix — no collapsed axes, no illegal combinations. Every variant embeds the deprecated .[DEPRECATED] Button - Small/XS instance.

#	Node	Type	Description	Dimensions	Notes
1	`813:31117`	default	yes	330 × 74	Root is a `<button>` element
2	`27:53213`	light	yes	330 × 74	Root is a `<div>` element
3	`813:31125`	default	no	330 × 41	Root is a `<button>` element (tap conflict)
4	`27:53225`	light	no	330 × 41	Root is a `<div>` element

1.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

Family

C1 — Duplicate component — Exists to add an action slot to Toast. Collapse into base Toast with action?: EBToastAction. Width drifts from base (330 vs. 312). Open

C4 — Deprecated Button embedded — Action surface uses .[DEPRECATED] Button - Small/XS (node 21:164490), slated for deletion Aug 22, 2025. Rebind to Button - XSmall before migration. Open

C5 — Tap conflict + missing action states — description=no variants wrap the root in a <button> overlapping the inner action. No pressed/disabled/loading states for the action. Open

C6 — No icon axis — Silently drops the With Icon axis that base Toast exposes. Consolidation recovers it. Open

C7 — Code Connect — Blocked on family consolidation. No standalone entry expected. Open