Badge — GCash DS Assessment

KeepNeeds Refinement

Badge Component link

A small label used to flag status, counts, or category — supports multiple intents and densities.

In Context

Contexts are illustrative. Final screens will reference actual GCash patterns.

Live Preview

Label

Properties

State

Level

Type

DS Health

Reusable

Pass

Universal status indicator used across transaction lists, vouchers, dashboards, and notifications. 7 semantic states and 3 emphasis levels cover all common badge use cases.

Self-contained

Pass

Pure display component. Carries its own background, label color, padding, and border-radius per variant. No external dependencies or slots.

Consistent

Partial

Token naming follows DS convention (main/badge/{semantic}/{level}/). Minor issues: State property names don't match token names (Info vs information, Success vs positive). Danger/Heavy and Disabled/Heavy Transaction variants have hardcoded opacity: 0.90.

Composable

Pass

Simple leaf component. Nests cleanly in list rows, card headers, table cells, and notification banners. No child slots or complex nesting.

Behavior

State	iOS	Android	Figma Property	Notes
Default	Yes	Yes	State + Level + Type	Display-only. All 7 states x 3 levels fully defined per type.

Resolved Issues

Hardcoded opacity: 0.90 removed from Danger/Heavy Transaction (21:111576) and Disabled/Heavy Transaction (3714:3863) inner containers. Both now at opacity 1, consistent with the other 66 variants. C3 Fixed
State property values renamed to match token semantic names across all 60 affected variants: Info → Information, Success → Positive, Warning → Notice, Danger → Negative, Disabled → Muted. Figma State values now align 1:1 with token namespace — cleaner Code Connect mapping, no translation layer needed. C2 Fixed

Open Issues

Code Connect mappings not registered. Structural work through v1.1 (state rename, opacity fix) is done — registration can proceed against the 68-variant schema. C7 · Code Connect Linkability

Types

Default

DES DEV

Pill-shaped badge with full border-radius (99px). Standard status indicator for general use.

Label

Properties

State

Level

Properties

Type Default

State Primary

Level Heavy

Colors

Background #005CE5

Label #FFFFFF

Layout

Padding H 8px

Padding V 2px (top) / 4px (bottom)

Corner radius 99px (pill)

Min height 20px

Typography

Text Style Primary/Label/Fine

Font Proxima Soft Bold

Size 12px

Tracking 0.5px

Line-height 12px

EBBadge("Label", intent: .information)

Colors by Appearance Mode

Display-only component. All colors bound to main/badge/{semantic}/{level}/ tokens. Primary and Brand states only support Heavy level.

Role	Token	Role	Token	Value
Primary	Heavy	bg	main/badge/primary/heavy/background	#005CE5
Primary	Heavy	label	main/badge/primary/heavy/label	#FFFFFF
Brand	Heavy	bg	main/badge/brand/heavy/background	#1972F9
Brand	Heavy	label	main/badge/brand/heavy/label	#FFFFFF
Info	Light	bg	main/badge/information/light/background	#E5F1FF
Info	Light	label	main/badge/information/light/label	#005CE5
Info	Medium	bg	main/badge/information/medium/background	#D2E5FF
Info	Medium	label	main/badge/information/medium/label	#005CE5
Info	Heavy	bg	main/badge/information/heavy/background	#2340A9
Info	Heavy	label	main/badge/information/heavy/label	#FFFFFF
Success	Light	bg	main/badge/positive/light/background	#E7F8F0
Success	Light	label	main/badge/positive/light/label	#048570
Success	Medium	bg	main/badge/positive/medium/background	#CAF2E0
Success	Medium	label	main/badge/positive/medium/label	#048570
Success	Heavy	bg	main/badge/positive/heavy/background	#12AF80
Success	Heavy	label	main/badge/positive/heavy/label	#FFFFFF
Warning	Light	bg	main/badge/notice/light/background	#FCF0CA
Warning	Light	label	main/badge/notice/light/label	#966F0B
Warning	Medium	bg	main/badge/notice/medium/background	#F7D96E
Warning	Medium	label	main/badge/notice/medium/label	#966F0B
Warning	Heavy	bg	main/badge/notice/heavy/background	#CA970C
Warning	Heavy	label	main/badge/notice/heavy/label	#FFFFFF
Danger	Light	bg	main/badge/negative/light/background	#F8E6E6
Danger	Light	label	main/badge/negative/light/label	#B50707
Danger	Medium	bg	main/badge/negative/medium/background	#F4C7C9
Danger	Medium	label	main/badge/negative/medium/label	#8D0710
Danger	Heavy	bg	main/badge/negative/heavy/background	#D61B2C
Danger	Heavy	label	main/badge/negative/heavy/label	#FFFFFF
Disabled	Light	bg	main/badge/muted/light/background	#C2C5CA
Disabled	Light	label	main/badge/muted/light/label	#FFFFFF
Disabled	Medium	bg	main/badge/muted/medium/background	#9A9FA7
Disabled	Medium	label	main/badge/muted/medium/label	#FFFFFF
Disabled	Heavy	bg	main/badge/muted/heavy/background	#717883
Disabled	Heavy	label	main/badge/muted/heavy/label	#FFFFFF

Voucher

DES DEV

Badge with bottom-right radius only (4px). Used on voucher cards and promotional items. Fixed 18px height.

Label

Properties

State

Level

Properties

Type Voucher

State Primary

Level Heavy

Colors

Background #005CE5

Label #FFFFFF

Layout

Height 18px (fixed)

Padding H 8px

Padding V 2px (top) / 4px (bottom)

Corner radius 0/0/4px/0 (BR only)

Typography

Text Style Primary/Label/Fine

Font Proxima Soft Bold

Size 12px

Tracking 0.5px

Line-height 12px

EBBadge("Voucher label", type: .voucher)

Layout by Type

Role	Token	Voucher	Transaction	Dashboard
Height	auto	18px (fixed)	auto	auto
Padding H	8px	8px	4px	4px
Padding V	2px (top) / 4px (bottom)	2px (top) / 4px (bottom)	1px (top) / 3px (bottom)	1px
Corner radius	99px (pill)	0/0/4px/0 (BR only)	4px	4px

Transaction

DES DEV

Rounded rectangle badge (4px radius). Used in transaction lists and history screens. Compact padding.

Label

Properties

State

Level

Properties

Type Transaction

State Primary

Level Heavy

Colors

Background #005CE5

Label #FFFFFF

Layout

Padding H 4px

Padding V 1px (top) / 3px (bottom)

Corner radius 4px

Min height 20px

Typography

Text Style Primary/Label/Fine

Font Proxima Soft Bold

Size 12px

Tracking 0.5px

Line-height 12px

EBBadge("Pending", intent: .notice, type: .transaction)

Typography

Role	Token	Font	Size	Tracking	Line-height
Default / Voucher / Transaction	Primary/Label/Fine	Proxima Soft Bold	12px	0.5px	12px
Dashboard	Primary/Label/Tiny	Proxima Soft Bold	10px	0.25px	10px

Dashboard

DES DEV

Compact rounded rectangle badge (4px radius) with smaller typography (10px). Used in dashboard widgets and summary cards.

Label

Properties

State

Level

Properties

Type Dashboard

State Primary

Level Heavy

Colors

Background #005CE5

Label #FFFFFF

Layout

Padding H 4px

Padding V 1px

Corner radius 4px

Min height 16px

Typography

Text Style Primary/Label/Tiny

Font Proxima Soft Bold

Size 10px

Tracking 0.25px

Line-height 10px

EBBadge("New", type: .dashboard)

Installation Planned API

iOS -- Swift Package Manager

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

// Or in Package.swift:
.package(
    url: "https://github.com/AY-Org/eb-ds-ios",
    from: "1.0.0"
)

Android -- Gradle (Kotlin DSL)

// build.gradle.kts (app)
dependencies {
    implementation("com.eastblue.ds:badge:1.0.0")
}

Import

import EastBlueDS  // SwiftUI
import com.eastblue.ds.badge.*  // Compose

Package not yet published. These are the planned distribution paths. API shape is final -- native implementation is pending.

Property Mapping

Every row maps a Figma component property to its native equivalent.

Figma Property	SwiftUI	Compose
`State=Primary`	`state: .primary`	`BadgeState.Primary`
`State=Brand`	`state: .brand`	`BadgeState.Brand`
`State=Info`	`state: .info`	`BadgeState.Info`
`State=Success`	`state: .success`	`BadgeState.Success`
`State=Warning`	`state: .warning`	`BadgeState.Warning`
`State=Danger`	`state: .danger`	`BadgeState.Danger`
`State=Disabled`	`state: .disabled`	`BadgeState.Disabled`
`Level=Heavy`	`level: .heavy`	`BadgeLevel.Heavy`
`Level=Medium`	`level: .medium`	`BadgeLevel.Medium`
`Level=Light`	`level: .light`	`BadgeLevel.Light`
`Type=Default`	`type: .default`	`BadgeType.Default`
`Type=Voucher`	`type: .voucher`	`BadgeType.Voucher`
`Type=Transaction`	`type: .transaction`	`BadgeType.Transaction`
`Type=Dashboard`	`type: .dashboard`	`BadgeType.Dashboard`

SwiftUI

ios/Components/Badge/EBBadge.swift

Jetpack Compose

android/components/badge/EBBadge.kt

Usage Snippets Planned API

Default (Pill)

// Success badge -- heavy level
EBBadge("Completed", state: .success, level: .heavy)

// Info badge -- light level
EBBadge("Pending", state: .info, level: .light)

// Success badge -- heavy level
EBBadge(
    text = "Completed",
    state = BadgeState.Success,
    level = BadgeLevel.Heavy
)

// Info badge -- light level
EBBadge(
    text = "Pending",
    state = BadgeState.Info,
    level = BadgeLevel.Light
)

Voucher

EBBadge("50% OFF", state: .danger, level: .heavy, type: .voucher)

EBBadge(
    text = "50% OFF",
    state = BadgeState.Danger,
    level = BadgeLevel.Heavy,
    type = BadgeType.Voucher
)

Transaction

EBBadge("Failed", state: .danger, level: .heavy, type: .transaction)

EBBadge(
    text = "Failed",
    state = BadgeState.Danger,
    level = BadgeLevel.Heavy,
    type = BadgeType.Transaction
)

Dashboard

EBBadge("Active", state: .success, level: .light, type: .dashboard)

EBBadge(
    text = "Active",
    state = BadgeState.Success,
    level = BadgeLevel.Light,
    type = BadgeType.Dashboard
)

Requirement	iOS	Android
Accessibility label	`accessibilityLabel("Status: Completed")`	`contentDescription = "Status: Completed"`
Decorative mode	`isAccessibilityElement = false` (when status is conveyed elsewhere)	`importantForAccessibility = no`
Color contrast	Heavy levels meet WCAG AA (4.5:1+)	Heavy levels meet WCAG AA (4.5:1+)
Non-color indicator	Badge text conveys meaning alongside color	Badge text conveys meaning alongside color

Usage Guidelines

Do

Use semantic states that match the content meaning (Success for completed, Danger for failed, Warning for pending).

Don't

Use badges for interactive elements -- badges are display-only status indicators.

Do

Use Heavy level for primary status indicators and Light/Medium for secondary or supporting context.

Don't

Use multiple Heavy badges in the same row -- visual noise. Use one Heavy + rest Light/Medium.

Do

Match badge Type to context: Default for general, Voucher for promos, Transaction for history, Dashboard for summaries.

Don't

Mix badge Types within the same list or group.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	Simple single-layer structure: container with text child. Semantic naming.
C2	Variant & Property Naming	Ready	Clean enum properties: State, Level, Type. Minor: State names don't match token semantic names.
C3	Token Coverage	Ready	All colors bound to `main/badge/` tokens. Note: 2 variants have hardcoded `opacity: 0.90`.
C4	Native Mappability	Ready	Maps to custom `EBBadge` on both platforms. Simple text + background shape.
C5	Interaction State Coverage	Not Applicable	Display-only component. No interactive states needed.
C6	Asset & Icon Quality	Not Applicable	No icons or assets. Text-only component.
C7	Code Connect Linkability	Needs Refinement	No CLI mappings registered yet. Property naming is clean and ready for mapping.

Code Connect

Aspect	Status	Notes
Property naming	Ready	Clean enum properties: State (7), Level (3), Type (4). Ready for Code Connect mapping.
Token coverage	Ready	All colors token-bound. Minor opacity inconsistency on 2 variants.
State coverage	Not Applicable	Display-only. No interaction states.
Native component file	Needs Refinement	EBBadge.swift / EBBadge.kt not yet created

Variants Inventory (68 total)

7 State values x 3 Level values x 4 Type values = 84 theoretical. Primary and Brand only support Heavy level, so actual count is (2 x 1 x 4) + (5 x 3 x 4) = 8 + 60 = 68 variants.

State	Level	Types	Notes
Primary	Heavy	Default, Voucher, Transaction, Dashboard	4 variants
Brand	Heavy	Default, Voucher, Transaction, Dashboard	4 variants
Info	Light / Medium / Heavy	Default, Voucher, Transaction, Dashboard	12 variants
Success	Light / Medium / Heavy	Default, Voucher, Transaction, Dashboard	12 variants
Warning	Light / Medium / Heavy	Default, Voucher, Transaction, Dashboard	12 variants
Danger	Light / Medium / Heavy	Default, Voucher, Transaction, Dashboard	12 variants
Disabled	Light / Medium / Heavy	Default, Voucher, Transaction, Dashboard	12 variants

1.1.0 — Minor

Structural closure -- node 18482:28972

Opacity normalized -- Hardcoded opacity: 0.90 removed from Danger/Heavy Transaction (21:111576) and Disabled/Heavy Transaction (3714:3863) inner containers. Both now at opacity 1, consistent with the other 66 variants. Fixed

C3 Fixed

State values renamed to match token semantics -- 60 variants renamed: Info -> Information, Success -> Positive, Warning -> Notice, Danger -> Negative, Disabled -> Muted. Figma State property now aligns 1:1 with token namespace (main/badge/{information|positive|notice|negative|muted}/{level}/). Cleaner Code Connect mapping with no translation layer. Fixed

C2 Fixed

1.0.0 — Major

Initial Assessment -- node 18482:28972

Component assessed -- 68 variants documented across State (Primary/Brand/Info/Success/Warning/Danger/Disabled) x Level (Heavy/Medium/Light) x Type (Default/Voucher/Transaction/Dashboard). Token audit confirms all colors bound to main/badge/{semantic}/{level}/ tokens. Documented

Initial

Hardcoded opacity on 2 variants -- Danger/Heavy and Disabled/Heavy Transaction variants have opacity: 0.90 on container instead of using token-driven values. Inconsistent with other variants. Fixed in 1.1.0

C3 Fixed

State-to-token name mismatch -- Figma property names (Info, Success, Warning, Danger, Disabled) don't match token semantic names (information, positive, notice, negative, muted). Minor friction for automated Code Connect mapping. Fixed in 1.1.0

C2 Fixed

Code Connect mappings -- No CLI mappings registered yet. Property naming is clean and ready for mapping. Open

C7 Open