RestructureNeeds Refinement
Inline Text Component link

A single-line text element used for inline labels, captions, or value pairs within a row.

Restructure — type enum hides 5 trailing-slot compositions
Same anti-pattern as Alert's 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.
In Context

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.

Live Preview

Amount

PHP 1,500.00

Content
label
value
description
cta
badge
Properties
type
DS Health
Reusable
Pass
Genuinely reused across transaction cards, modal summaries, and list items. A strong primitive.
Self-contained
Warn
Binds tokens cleanly but draws its own Badge inline (information/light hardcoded) instead of instance-swapping from the canonical Badge component — parallel source of truth for badge styling.
Consistent
Warn
The 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.
Composable
Partial
Used as a stacking block inside larger components — good. But consumers can't freely combine (e.g. clipboard + description) because the enum makes those permutations unrepresentable.
Behavior
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.
Open Issues
  • type enum conflates two axes and hides 5 different layouts. with Clipboard and with Badge describe the trailing slot, while with Description and with Text Link describe 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 unified trailing slot. C1 · Layer Structure & Naming
  • Enum values mix concerns and use "with X" phrasing. with Clipboard / with Badge / with Description / with Text Link all 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 Badge variant hardcodes main/badge/information/light/background and main/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 Copy node 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 swappable icon prop 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 type enum would bake the anti-pattern into the native API. C7 · Code Connect Linkability
Design Recommendations
  • Replace type with 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 trailing slot 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. hasCopy reads better than today's with Clipboard — "copy" is the action, "clipboard" is the target. Provide an onCopy callback 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 trailingIcon as 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 (iconicon-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
Styles
Default — label + value
DES DEV

The baseline row. Leading label, trailing value, 25 px tall, full-width auto-layout.

Amount

PHP 1,500.00

Properties
Type
Label
State
Properties
type default
label Amount
state default
value "0.00"
Colors
Label #0A2757
Value #445C85
Description #6780A9
Link #005CE5
Icon #445C85
Disabled opacity 40%
Layout
Width 368 (fill)
Height 25
Padding 0 (row) · 5 0 5 0 (value cell)
Gap 0 (fill + hug)
Typography
Label style Primary/Label/Light/Base
Label font Proxima Soft Semibold
Size / Line / Tracking 16 / 16 / +0.25
Variant 1 — Colors

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
With Clipboard — value + copy icon
DES DEV

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

GC123456789
Properties
Type
Label
State
Properties
type with-clipboard
label Reference No
state default
Layout Label-left, Value+icon-right
Colors
Label color #3C4A5C
Value color #0A2757
Icon color #005CE5
Layout
Row height auto
Gap 8
Icon size 20 × 20
Padding 0
Typography
Label style Body/Small
Value style Body/Medium · Bold
Variant 2 — Colors

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
With Badge — label + trailing badge
DES DEV

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

Applied
Properties
Type
Label
State
Properties
type with-badge
label Voucher
state default
Badge style Brand
Colors
Label color #3C4A5C
Badge bg #E8F1FF
Badge label #005CE5
Layout
Row height auto
Gap 8
Badge height 20
Badge padding (h) 8
Typography
Label style Body/Small
Badge style Caption/Bold
Variant 3 — Colors

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
With Description
DES DEV

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

Properties
Type
Label
State
Properties
type with-description
label Service fee
state default
Layout Vertical stack
Colors
Label color #3C4A5C
Value color #0A2757
Description color #3C4A5C
Layout
Row height auto
Gap 4
Description gap 2
Padding 0
Typography
Label style Body/Small
Value style Body/Medium · Bold
Description style Caption/Regular
Variant 4 — Colors

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
Variant 5 — Colors

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
Property Mapping
Figma PropertySwiftUICompose
(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?
Accessibility
RequirementiOSAndroid
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.
Criteria Scorecard
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.
Variants Inventory (5 total)

type is a single enum with 5 values — each a structurally different trailing-slot composition.

#NodetypeLayoutDimensions
121:138493Defaultlabel · value368 × 25
221:138497with Clipboardlabel · value · copy-icon368 × 24
321:138503with Badgelabel · trailing badge368 × 24
421:138506with Description[label · value] / description368 × 38
521:138512with Text Link[label · value] / [description · CTA]368 × 41
1.0.0 — April 2026Major
Initial Assessment · node 18652:71101
Verdict: Restructure — Replace type enum (5 layouts) with orthogonal booleans + unified trailing slot. Instance-swap Badge. Add pressed state on copy icon. Open
Architecture
C1 — Type enum hides compositions — 5 type values conflate two axes (trailing slot + sub-row). Split into hasCopy, hasDescription, hasTextLink, unified trailing slot. Open
C1
C2 — "with X" value phrasing — Figma enum values describe what's added, not what the row IS. Rename under boolean-prop schema. Open
C2
C6 — Badge drawn inlinewith Badge hardcodes information/light fill + label instead of instance-swapping Badge. Parallel source of truth. Open
C6
C5 — Copy / link pressed states — Copy icon and text link have no pressed tint, focus ring, or success feedback hook. Open
C5
Tokens ✓ — All four semantic color roles (label, label-value, description, label-link) plus icon bound correctly. Noted
Praise
C7 — Code Connect — Blocked on restructure. Open
C7