KeepNeeds Refinement
Inline Message Component link

A full-frame status surface — illustration, title, description, and an optional body — for confirm / processing / error / neutral outcomes. 4 variants across a single Type axis (Success / Loading / Error / Neutral), with an Illustration Container and a Body Container slot.

Rebuilt — slot-based and simplified
The rebuild exposed the body content as a real Body Container slot, added a Neutral type, resolved the alpha bg-subtle token, and collapsed the two illustration sizes into a single 106px Illustration Container — dropping the redundant Illustration Size axis to a clean single-axis Type enum. Slot names were also de-duplicated and the illustration term unified. Only Code Connect registration remains.
In Context

Contexts are illustrative. Final screens will reference actual GCash patterns. Inline Message is the primary surface for transaction confirmations and error recovery flows.

Payment Successful Ref. 1234567890
Live Preview

Add your label here

Add your description here.
This is just a filler sentence.

Header

Content
Content
Content
Content

Header

Content
Content
Content
Reference no.1234567890
Properties
type
assetSize
hasBodyContent
hasReferenceNumber
DS Health
Reusable
Pass
Covers confirm, processing, and error outcomes for transactions, logins, KYC, and any multi-step flow with a final status surface.
Self-contained
Pass
Carries its own background, border, radius, and typography, all token-bound. The illustration is a swappable Illustration Container slot at a single 106px size, and the asset itself is resolved.
Consistent
Pass
Single Type axis (Success / Loading / Error / Neutral), Title Case. The redundant Illustration Size axis was removed, the bg-subtle alpha token was resolved, and the slot names were de-duplicated (Illustration Container / Body Container) with the illustration term unified.
Composable
Pass
Two real Figma slots — Illustration Container for the visual and Body Container for custom content (transaction breakdowns, beneficiary lists), so consumers compose their own body rather than being locked to a fixed List. Both map to @ViewBuilder / @Composable slots.
Behavior
State iOS Android Figma Property Notes
Success Yes Yes Type=Success Positive-outcome palette. Completed action.
Loading Yes Yes Type=Loading Processing state — the illustration slot carries the loading animation.
Error Yes Yes Type=Error Negative palette. Failed or blocked action.
Neutral Yes Yes Type=Neutral Informational, no positive/negative charge. Added in the rebuild.
Body content Yes Yes Body Container (slot) Optional custom content below the header — transaction breakdown, beneficiary list, or any composed instances.
Issues
  • Code Connect mappings not registered. The slot, token, and schema blockers are all resolved. Registration is unblocked but the SwiftUI / Compose mappings are not yet wired and the native component does not exist — snippets remain a Planned API. C7 · Code Connect Linkability
  • v2.0: Body content exposed as a real Figma slot — Body Container — so consumers compose their own List Items, tables, or custom content instead of being locked to a fixed List. (C2)
  • v2.0: Neutral type added — the enum now covers Success / Loading / Error / Neutral, so informational messages no longer have to borrow a charged intent. (C2)
  • v2.0: bg-subtle alpha token resolved — the background no longer composites against whatever sits behind it. (C3)
  • v2.0: Illustration is now a swappable Illustration Container slot rather than a baked-in raster, and the asset itself is resolved. (C6)
  • v2.1: Redundant Illustration Size axis removed — the two 106 / 64 sizes collapsed to a single 106px Illustration Container, leaving a clean single-axis Type enum (8 variants → 4). (C2)
  • v2.1: Slot names de-duplicated — Illustration Container Slot / Body Container Slot → Illustration Container / Body Container (dropping the doubled "Container Slot"), and the size property was aligned from Asset Size to the same Illustration term so the prop and slot agree. (C1/C2)
Recommendations
  • Register Code Connect mapping to EBInlineMessage. Wire Type to the SwiftUI / Compose API and map the Illustration Container and Body Container slots to @ViewBuilder / @Composable content slots. Docs
  • Expose the body-content area as a Figma Slot. v2.0: Applied — Body Container is a real slot; consumers compose their own content and it maps to a native content slot. Slot
  • Consider a "neutral / info" type. v2.0: Applied — Type=Neutral ships alongside Success / Loading / Error. Property
  • Replace bg-subtle with a solid token. v2.0: Applied — the alpha-composited background is resolved to a context-independent value. Token
  • Document illustration + Lottie asset dependencies. v2.0: Superseded — the illustration is now a swappable slot with a resolved asset rather than a bundled raster to document. Docs
Types
Default
DES DEV

Result-state notification card with 3D illustration, title, description, optional content body, and optional reference number. Flip Variant for Success / Loading / Error; toggle Body content + Reference no. independently.

Properties
Variant
Body content
Reference no.
Properties
Variant Success
Body content Show
Reference no. Show
Colors
Surface #FFFFFF
Border #E5EBF4
Header #0A2757
Title #005CE5
Description #445C85
Reference label #90A8D0
Layout
Card 360 × 664
Card radius 12 (no shadow)
Content section 360 × 284 · 48 top / 24 horiz / 24 bottom
Illustration 106 × 106 (24 spacer below)
Receipt → desc gap 16
Description 312 wide · 2 lines × 20
Download icon 24 × 24 overlay at top 16 / right 18
Body content 360 × 316 · border-top + bottom
Section title bar 44 · padding 12 vert · text x=48
Section container bg #F6F9FD @ 24% · 12 vert / 48 horiz
List rows List Item instances — see List Item component
Reference no. 360 × 64 · 24 top / 16 row / 24 bottom
Typography
Title Proxima Soft Bold · 22 / 26 · Primary/Headlines/Section
Description BarkAda Medium · 14 / 20 · Secondary/Default/Base
Reference no. Proxima Soft Semibold · 16 / 16 · +0.25
Colors by Type

Each type ships its own bg, border, bg-subtle, and label tokens. bg-subtle currently bakes in 24% alpha — flagged under C3.

Role Token TokenValue
Success bg main/inline-message/color/success/bg #FFFFFF
— border main/inline-message/color/success/border #E5EBF4
— bg-subtle alpha baked main/inline-message/color/success/bg-subtle rgba(246,249,253,0.24)
— title main/inline-message/color/success/label-title #005CE5
— description main/inline-message/color/success/label-description #445C85
— section header main/inline-message/color/success/label-header #0A2757
— reference label main/inline-message/color/success/label-reference #90A8D0
— reference number main/inline-message/color/success/label-number #0A2757
Installation Planned API

iOS — Swift Package Manager

// In Xcode: File → Add Package Dependencies
"https://github.com/AY-Org/eb-ds-ios"

// Requires: lottie-ios for loading animation
"https://github.com/airbnb/lottie-ios"

Android — Gradle (Kotlin DSL)

dependencies {
    implementation("com.eastblue.ds:inline-message:1.0.0")
    // Requires: lottie-compose for loading animation
    implementation("com.airbnb.android:lottie-compose:6.4.0")
}
Property Mapping
Figma PropertySwiftUICompose
type=Success/Loading/Error .ebType(.success/.loading/.error) type = EBInlineMessageType.*
assetSize=Large/Small .assetSize(.large/.small) assetSize = EBAssetSize.*
title / description title: String · description: String title: String · description: String
hasDownload onDownload: (() -> Void)? onDownload: (() -> Unit)?
hasBodyContent (proposed slot) @ViewBuilder body body: @Composable () -> Unit
hasReferenceNumber referenceNumber: String? referenceNumber: String?
SwiftUI
ios/Components/InlineMessage/EBInlineMessage.swift
Jetpack Compose
android/components/inlinemessage/EBInlineMessage.kt
Usage Snippets Planned API
Usage
// Success with body content + reference
EBInlineMessage(
    title: "Payment Successful",
    description: "Your transfer of ₱500 is complete.",
    referenceNumber: "1234567890"
) {
    EBListItem("Send amount: ₱500") { EBListMarker(variant: .check) }
    EBListItem("Fee: ₱0") { EBListMarker(variant: .check) }
}
.ebType(.success)

// Loading (Lottie spinner)
EBInlineMessage(
    title: "Processing your transaction",
    description: "This usually takes a few seconds."
)
.ebType(.loading)

// Error
EBInlineMessage(
    title: "Transfer Failed",
    description: "Insufficient balance. Please top up and try again."
)
.ebType(.error)
// Success with body content + reference
EBInlineMessage(
    type = EBInlineMessageType.Success,
    title = "Payment Successful",
    description = "Your transfer of ₱500 is complete.",
    referenceNumber = "1234567890"
) {
    EBListItem(content = "Send amount: ₱500") { EBListMarker(variant = EBListMarker.Check) }
    EBListItem(content = "Fee: ₱0") { EBListMarker(variant = EBListMarker.Check) }
}

// Loading (Lottie spinner)
EBInlineMessage(
    type = EBInlineMessageType.Loading,
    title = "Processing your transaction",
    description = "This usually takes a few seconds."
)

// Error
EBInlineMessage(
    type = EBInlineMessageType.Error,
    title = "Transfer Failed",
    description = "Insufficient balance. Please top up and try again."
)
Accessibility
RequirementiOSAndroid
Role Group the card as a single accessibility element with combined label mergeDescendants = true on the container
Live region Announce on type change: .accessibilityLiveRegion liveRegion = LiveRegionMode.Polite
Illustrations Decorative: .accessibilityHidden(true) contentDescription = null
Loading progress Announce "Processing" via .accessibilityValue stateDescription = "Processing"
Download action Separate button with .accessibilityLabel("Download receipt") contentDescription = "Download receipt"
Usage Guidelines

Do

Use Inline Message as the final surface of a transaction flow — confirm, failure recovery, or pending processing. Include the reference number so users can escalate if needed.

Don't

Use it for transient notifications — use Toast instead. Inline Message is persistent and occupies the screen.

Do

Let users tap the download icon to save a PDF receipt or share the reference number. Makes customer support escalations easier.

Don't

Include the download affordance on the Loading variant — there's nothing to download until the transaction completes.

Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Semantic: content, body-content, section-1, reference-number, Download Small.
C2 Variant & Property Naming Needs Refinement Type values clean. Body content should be a slot, not a boolean-gated hardcoded List.
C3 Token Coverage Requires Rework bg-subtle uses alpha-composited value instead of a solid token.
C4 Native Mappability Ready Custom card composable — no standard native primitive but straightforward to build.
C5 Interaction State Coverage Ready Display surface — interactive states live on children (download button, list items).
C6 Asset & Icon Quality Requires Rework 3D raster illustrations + Lottie animation — asset bundling required.
C7 Code Connect Linkability Needs Refinement Not mapped.
Variants Inventory (6 total)

typeassetSizeNode ID
SuccessLarge27:168911
SuccessSmall27:169118
LoadingLarge27:168980
LoadingSmall27:169187
ErrorLarge27:169049
ErrorSmall27:169256
1.0.0 — April 2026Major
Initial Assessment · node 27:168910
Component assessed — 6 variants (type × assetSize). Composes canonical List Item for body content. Documented
Initial
bg-subtle alpha token — 24% alpha baked in. Open
C3 Open
Raster illustrations + Lottie dependency. Open
C6 Open
Body content should be a slot. Open
C2 Open
Code Connect mappings — Not registered. Open
C7 Open