A single-line text element used for inline labels, captions, or value pairs within a row.
Full Width and Generic Transaction Card's type. Replace the enum with orthogonal booleans (hasCopy, hasDescription, hasTextLink) plus a unified trailing slot so Badge can be instance-swapped instead of drawn inline. The component itself belongs — its four semantic color tokens (label, label-value, description, label-link) give it enough DS opinion to ship as EBInlineText, but behind a cleaner schema.Inline Text is a composition primitive. You'll find stacks of it inside Generic Transaction Card's detail modal, Send Money confirmation screens, receipt summaries, and fee-breakdown list items. Rarely used standalone.
Amount
PHP 1,500.00
type enum conflates two axes (trailing-slot content and sub-row content). with Description and with Text Link describe the second row; with Clipboard and with Badge describe the first. Merging them into one enum forces consumers to pick incompatible combinations.| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Default | Yes | Yes | type=Default | Label leading, value trailing. The baseline receipt row. |
| With Clipboard | Yes | Yes | type=with Clipboard | Value + 24 × 24 copy icon. Tapping the icon copies the value to clipboard. |
| With Badge | Yes | Yes | type=with Badge | Replaces the value with a trailing badge pill. Used for voucher / discount selection. |
| With Description | Yes | Yes | type=with Description | Adds a second row below the label with secondary caption text. |
| With Text Link | Yes | Yes | type=with Text Link | Second row adds a trailing text link (CTA) next to the description. |
| Pressed (copy icon) | N/A | N/A | Not built | Copy icon has no pressed state or success toast hook — users get no feedback when the tap lands. |
-
typeenum conflates two axes and hides 5 different layouts.with Clipboardandwith Badgedescribe the trailing slot, whilewith Descriptionandwith Text Linkdescribe a second row. As one enum, the combinations "clipboard + description" and "badge + text link" are unrepresentable — even though real screens need them. Split into orthogonal booleans (hasCopy,hasDescription,hasTextLink) with a unifiedtrailingslot. C1 · Layer Structure & Naming - Enum values mix concerns and use "with X" phrasing.
with Clipboard/with Badge/with Description/with Text Linkall read as feature toggles ("with feature X"), which reinforces the anti-pattern of the previous bullet. Under the proposed schema, these become boolean props named by what they ARE, not what they add. C2 · Variant & Property Naming - Badge variant is drawn inline, not instance-swapped. The
with Badgevariant hardcodesmain/badge/information/light/backgroundandmain/badge/information/light/label— duplicating the Badge component's styling rules. If Badge changes its hover state, border, or typography, Inline Text silently drifts. Replace with an instance swap on a trailing slot. C6 · Asset & Icon Quality - Copy icon appears to be drawn inline rather than a DS Icon instance. The
Copynode is a local instance, but its child layers (shape_half,shape_full) suggest a one-off vector rather than a canonical icon swapped from the DS icon library. Confirm the source and, if necessary, replace with a swappableiconprop so consumers can choose clipboard / share / refresh trailing actions. C6 · Asset & Icon Quality - No pressed state on the copy action. The clipboard variant is the only interactive part of Inline Text and it ships with no pressed tint, no focus ring, and no success toast hook. Add a pressed state on the icon and document the success-toast convention. C5 · Interaction State Coverage
- Code Connect mappings not registered. Blocked on the slot / boolean restructure — mapping today's single
typeenum would bake the anti-pattern into the native API. C7 · Code Connect Linkability
- Replace
typewith orthogonal booleans + a trailing slot. Target schema:label: String,trailing: value(String) | badge(Badge) | custom,hasCopy: Bool,hasDescription: Bool,hasTextLink: Bool,description?: String,ctaLabel?: String. This unlocks valid combinations today's enum forbids (copy + description, badge + link) without adding any net new variants. Property - Instance-swap Badge instead of drawing it inline. Expose a
trailingslot that accepts a Badge instance. Removes the parallel badge-styling source, keeps Inline Text honest as a layout primitive. Composition - Rename the clipboard prop to describe the action.
hasCopyreads better than today'swith Clipboard— "copy" is the action, "clipboard" is the target. Provide anonCopycallback in the native API and document the success-toast convention. Rename - Confirm the copy icon is a DS Icon instance. If it's a local one-off, replace with a swapped DS Icon so the whole family shares one icon source. While at it, expose
trailingIconas a slot so screens can use share / external-link / refresh instead of copy. Slot - Add a pressed state on the copy icon. Subtle tint change (
icon→icon-pressed) plus a documented toast ("Copied to clipboard") on tap. This is the only interactive affordance in Inline Text — it needs feedback. State - Document the stacking recipe. Most real usage is a vertical stack of 3–6 Inline Text rows inside a modal or card (fee breakdowns, transaction details). Add a "Receipt block" recipe page showing the stack spacing (8 px gap, 1 px divider optional) so consumers don't reinvent it. Docs
- Reconcile typography with Generic Transaction Card's metadata. Inline Text's description row uses BarkAda Semibold 12/18. Generic Transaction Card's date metadata uses the same font but a different line-height bucket. Align captions family-wide so receipt text reads consistently. Family
The baseline row. Leading label, trailing value, 25 px tall, full-width auto-layout.
Amount
PHP 1,500.00
Label · value pairs used inline within paragraphs and cards.
| Role | Token | Default |
|---|---|---|
| Label | inline-text/color/label | #0A2757 |
| Value | inline-text/color/label-value | #445C85 |
| Description | inline-text/color/description | #6780A9 |
| Link | inline-text/color/label-link | #005CE5 |
| Icon | inline-text/color/icon | #445C85 |
Adds a 24 × 24 copy icon to the right of the value. Tapping the icon copies the value to clipboard. Icon uses <code>inline-text/icon</code> token.
Reference No
GC123456789Label · value pairs used inline within paragraphs and cards.
| Role | Token | Default |
|---|---|---|
| Label | inline-text/color/label | #0A2757 |
| Value | inline-text/color/label-value | #445C85 |
| Description | inline-text/color/description | #6780A9 |
| Link | inline-text/color/label-link | #005CE5 |
| Icon | inline-text/color/icon | #445C85 |
Replaces the value cell with a Badge pill. Used on voucher / discount rows. Today the badge is drawn inline (information/light hardcoded) rather than instance-swapped from the Badge component.
Voucher
AppliedLabel · value pairs used inline within paragraphs and cards.
| Role | Token | Default |
|---|---|---|
| Label | inline-text/color/label | #0A2757 |
| Value | inline-text/color/label-value | #445C85 |
| Description | inline-text/color/description | #6780A9 |
| Link | inline-text/color/label-link | #005CE5 |
| Icon | inline-text/color/icon | #445C85 |
Adds a second row below the label/value with a description caption. Description uses BarkAda Semibold 12/18.
Service fee
Includes ₱10 service fee
PHP 10.00
Label · value pairs used inline within paragraphs and cards.
| Role | Token | Default |
|---|---|---|
| Label | inline-text/color/label | #0A2757 |
| Value | inline-text/color/label-value | #445C85 |
| Description | inline-text/color/description | #6780A9 |
| Link | inline-text/color/label-link | #005CE5 |
| Icon | inline-text/color/icon | #445C85 |
Adds a trailing link (CTA) to the description row. Link uses <code>inline-text/label-link</code> token.
Promo code
Saved PHP 50.00
GC50OFF
Change
Label · value pairs used inline within paragraphs and cards.
| Role | Token | Default |
|---|---|---|
| Label | inline-text/color/label | #0A2757 |
| Value | inline-text/color/label-value | #445C85 |
| Description | inline-text/color/description | #6780A9 |
| Link | inline-text/color/label-link | #005CE5 |
| Icon | inline-text/color/icon | #445C85 |
| Figma Property | SwiftUI | Compose |
|---|---|---|
| (hardcoded) | label: String | label: String |
type=Default / with Clipboard | trailing = .value(String) | trailing: EBInlineTextTrailing |
type=with Badge | trailing = .badge(Badge) (instance) | 同上 |
type=with Clipboard | hasCopy: Bool | onCopy: (() -> Void)? |
type=with Description | description?: String | description: String? |
type=with Text Link | ctaLabel?: String + onCtaTap? | cta: EBInlineTextCTA? |
| (not modeled) | trailingIcon?: Icon (slot) | trailingIcon: Image? |
| Requirement | iOS | Android |
|---|---|---|
| Row reads as "label, value" | Merge children: .accessibilityElement(children: .combine). Announces "Amount, 1,500 pesos". | Modifier.semantics(mergeDescendants = true) on the row. |
| Copy button | Dedicated Button around the icon with accessibilityLabel: "Copy reference number". Announce success via UIAccessibility.post(.announcement, "Copied"). | IconButton with contentDescription. On click, call view.announceForAccessibility("Copied"). |
| Text link as link | Use Button with accessibilityAddTraits(.isLink). Minimum 44 × 44 touch target. | TextButton or clickable text with role Role.Button. Minimum 48 dp touch target. |
| Currency announcement | Use localized currency formatter on accessibilityValue, not raw "PHP 1,500.00". | Same — announce via contentDescription with currency formatter applied. |
| Dynamic Type / font scaling | Text uses .font(.custom(..., relativeTo: .body)) so it scales with Dynamic Type. | Use sp units for text size; respect system font scale. |
| ID | Criterion | Status | Notes |
|---|---|---|---|
| C1 | Layer Structure & Naming | Requires Rework | type enum conflates two axes — split into orthogonal booleans + slot. |
| C2 | Variant & Property Naming | Requires Rework | Enum values use "with X" phrasing and describe features, not semantics. |
| C3 | Token Coverage | Ready | All colors bound to main/inline-text/color/*. Spacing + typography tokens intact. |
| C4 | Native Mappability | Needs Refinement | No 1:1 native primitive — it's a styled HStack. Maps cleanly as EBInlineText wrapper once restructured. |
| C5 | Interaction State Coverage | Needs Refinement | No pressed state on the copy icon or text link. |
| C6 | Asset & Icon Quality | Needs Refinement | Badge drawn inline; copy icon appears one-off — confirm + instance-swap both. |
| C7 | Code Connect Linkability | Not Mapped | Blocked on restructure — mapping today's enum would bake the anti-pattern. |
type is a single enum with 5 values — each a structurally different trailing-slot composition.
| # | Node | type | Layout | Dimensions |
|---|---|---|---|---|
| 1 | 21:138493 | Default | label · value | 368 × 25 |
| 2 | 21:138497 | with Clipboard | label · value · copy-icon | 368 × 24 |
| 3 | 21:138503 | with Badge | label · trailing badge | 368 × 24 |
| 4 | 21:138506 | with Description | [label · value] / description | 368 × 38 |
| 5 | 21:138512 | with Text Link | [label · value] / [description · CTA] | 368 × 41 |
type enum (5 layouts) with orthogonal booleans + unified trailing slot. Instance-swap Badge. Add pressed state on copy icon. Opentype values conflate two axes (trailing slot + sub-row). Split into hasCopy, hasDescription, hasTextLink, unified trailing slot. Openwith Badge hardcodes information/light fill + label instead of instance-swapping Badge. Parallel source of truth. Openlabel, label-value, description, label-link) plus icon bound correctly. Noted