RestructureNeeds Refinement
Chip Component link

A 32px pill used for filters, tags, selected values, and pill-styled dropdown triggers.

Recommend rename + consolidation
Rename "Filter" → Chip (industry term — Material, Polaris, Carbon all use it). Merge Filter + Filter with Dropdown into one component with style (filled/light/outline), leading (none/avatar/icon), and trailing (none/close/chevron) slot props. Fixes the paradigm mismatch, collapses 8 variants into cleaner prop combinations, and aligns with native chip APIs.
In Context

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

Vouchers
Live Preview
Filter Name
Properties
style
leading
trailing
DS Health
Reusable
Pass
Fits filter rows, applied-filter readouts, tag lists, and pill-styled sort/filter triggers. Same shape works across all three use cases — that's the argument for consolidation.
Self-contained
Pass
Carries pill radius, height, padding, typography, and color tokens. All 8 variants share the same base anatomy.
Consistent
Warn
Split across two components with different property schemas. Filter uses type + with icon (yes/no). Dropdown uses type=default/"with active time". C2
Composable
Warn
Leading slot is a hardcoded 24px gray circle (icon-placeholder), not an Avatar instance or swappable Icon. Breaks compositional inheritance. C6
Behavior
State iOS Android Figma Property Notes
Active / Selected Yes Yes Filter · type=primary Filled blue background, white label. Used when a filter is applied.
Inactive (light) Yes Yes Filter · type=light Light gray pill, gray label. Used for unapplied filters or tag readouts.
Inactive (outline) Yes Yes Filter · type=outline White pill, gray border, gray label.
Dropdown trigger Yes Yes Filter w/ Dropdown · default Light style with chevron. Used for sort/filter pickers.
Pressed / Disabled / Error N/A N/A — Not defined in Figma. C5
Open Issues
  • Filter Two separate Figma components share the same pill anatomy — (6 variants) and Filter with Dropdown (2 variants). Should consolidate into a single Chip with style, leading, and trailing slot props. C2
  • Boolean property with icon uses yes/no instead of true/false. Incompatible with Swift Bool / Kotlin Boolean. C2
  • Enum value "with active time" contains spaces and a nonsensical name — should be withValue / hasSelectedValue or collapse into a selectedValue optional string prop. C2
  • Leading slot is a hardcoded 24px gray circle (icon-placeholder) — should be a swappable Avatar or Icon instance via instance swap. C6
  • No pressed / selected / disabled / error states documented. C5
  • Code Connect CLI mappings not registered. C7
Design Recommendations
  • Rename "Filter" → "Chip" and merge with "Filter with Dropdown" into one component. Matches industry terminology (Material FilterChip/InputChip, Polaris Tag, Carbon Tag). Docs
  • Replace the property schema with three semantic slot props: style (filled / light / outline), leading (none / avatar / icon), trailing (none / close / chevron). Plus optional selectedValue string for the "Sort by X" pattern. Property
  • Replace the leading placeholder with a real slot — instance-swap an Avatar (for person filters) or Icon (for category filters). Slot
  • Add pressed / disabled states so applied-filter chips have a documented pressed affordance and disabled filters have a defined appearance. State
Styles
Filled
DES DEV

Brand blue fill with white label. Represents an active/applied filter.

Filter Name
Properties
Style
Leading
Trailing
Properties
Style Filled
Leading avatar
Trailing close
Colors
Background #005CE5
Label #FFFFFF
Icon #F6F9FDB8
Layout
Height 32px
Corner radius 99px (pill)
Padding L 4px
Padding R 14px
Leading avatar 24 × 24
Close icon 16 × 16
Typography
Text style Primary/Label/Base
Font Proxima Soft Bold
Size 16px
Line-height 16px
Tracking 0.25px
Colors by Style

Three style modes, each with bg, label, and icon tokens. Dropdown adds label-link and chevron.

Role Token TokenValue
Filled bg main/filter/color/primary/bg #005CE5
— label main/filter/color/primary/label #FFFFFF
— icon main/filter/color/primary/icon #F6F9FDB8
Light bg main/filter/color/secondary/bg #EEF2F9
— label main/filter/color/secondary/label #6780A9
— icon main/filter/color/secondary/icon #7E96BE
— selected value main/filter/color/secondary/label-link #005CE5
— chevron main/filter/color/secondary/chevron #005CE5
Outline border main/filter/color/tertiary/border #D7E0EF
— label main/filter/color/tertiary/label #6780A9
— icon main/filter/color/tertiary/icon #7E96BE
Light
DES DEV

Light gray fill with gray label. Used for inactive filters, tags, or dropdown trigger base.

Category
Properties
Style
Leading
Trailing
Properties
Style Light
Leading none
Trailing none
Colors
Background #EEF2F9
Label #6780A9
Icon #7E96BE
Layout
Height 32px
Corner radius 99px (pill)
Padding horizontal 14px
Typography
Text style Primary/Label/Base
Font Proxima Soft Bold
Size 16px
Line-height 16px
Tracking 0.25px
Outline
DES DEV

White fill with 2px gray border and gray label. Alternative inactive style for light surfaces.

Category
Properties
Style
Leading
Trailing
Properties
Style Outline
Leading none
Trailing none
Colors
Background #FFFFFF
Border #D7E0EF
Label #6780A9
Layout
Height 32px
Corner radius 99px (pill)
Border width 2px
Padding horizontal 14px
Typography
Text style Primary/Label/Base
Font Proxima Soft Bold
Size 16px
Line-height 16px
Tracking 0.25px
Dropdown
DES DEV

Light style with a trailing chevron. Used as a pill-styled dropdown trigger. Selected value shown in blue <code>label-link</code>.

Sort byConservative first
Properties
Style
Leading
Trailing
Properties
Style Light
Leading none
Trailing chevron
Colors
Background #EEF2F9
Label #6780A9
Selected value #005CE5
Chevron #005CE5
Layout
Height 32px
Corner radius 99px (pill)
Padding left 16px
Padding right 12px
Chevron size 24 × 24
Typography
Text style Primary/Label/Base
Font Proxima Soft Bold
Size 16px
Line-height 16px
Tracking 0.25px
Installation Planned API

iOS — Swift Package Manager

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

Android — Gradle (Kotlin DSL)

dependencies {
    implementation("com.eastblue.ds:chip:1.0.0")
}
Property Mapping
Figma PropertySwiftUICompose
style .ebStyle(.filled / .light / .outline) style = EBChipStyle.*
leading leading: EBChipLeading? leading: @Composable (() -> Unit)?
trailing trailing: EBChipTrailing? trailing: EBChipTrailing?
selectedValue selectedValue: String? selectedValue: String?
label title: String label: String
onTap / onClose action / onRemove onClick / onRemove
SwiftUI
ios/Components/Chip/EBChip.swift
Jetpack Compose
android/components/chip/EBChip.kt
Usage Snippets Planned API
Usage
// Applied filter — brand fill, avatar + close
EBChip("Filter Name",
    leading: .avatar(EBAvatar(initials: "DM")),
    trailing: .close,
    onRemove: { /* remove filter */ })
.ebStyle(.filled)

// Inactive filter — light, label only
EBChip("Category")
    .ebStyle(.light)

// Dropdown trigger with selected value
EBChip("Sort by",
    selectedValue: "Conservative first",
    trailing: .chevron,
    action: { /* open dropdown */ })
.ebStyle(.light)
// Applied filter — brand fill, avatar + close
EBChip(
    label = "Filter Name",
    style = EBChipStyle.Filled,
    leading = { EBAvatar(initials = "DM") },
    trailing = EBChipTrailing.Close,
    onRemove = { /* remove filter */ }
)

// Inactive filter — light, label only
EBChip(
    label = "Category",
    style = EBChipStyle.Light
)

// Dropdown trigger with selected value
EBChip(
    label = "Sort by",
    selectedValue = "Conservative first",
    style = EBChipStyle.Light,
    trailing = EBChipTrailing.Chevron,
    onClick = { /* open dropdown */ }
)
Accessibility
RequirementiOSAndroid
Tap target 32px height is below HIG 44pt — wrap in a 44pt-tall hit area 32dp height is below Material 48dp — expand touch target via Modifier.minimumInteractiveComponentSize()
Role .accessibilityAddTraits(.isButton) Use semantics { role = Role.Button }
Close button label .accessibilityLabel("Remove filter: \(label)") contentDescription = "Remove filter: $label"
Dropdown indicator .accessibilityHint("Double-tap to change") Announce chevron via role + state
Selected state .accessibilityAddTraits(.isSelected) for style=filled selected = true in semantics for active filters
Usage Guidelines

Do

Use style=filled for applied/active filters, style=light for inactive filters and dropdown triggers, style=outline when the surface beneath is already light gray.

Don't

Mix filled and light chips in the same filter row without intent — it signals "one filter is selected," so using both styles for unrelated reasons misleads the user.

Do

Pair the close affordance with applied filters so users can remove them with a single tap.

Don't

Add a close icon to dropdown-trigger chips — the chevron already indicates the tap behavior; a close icon implies removal instead of picking.

Do

Keep the chip label to one or two words. Use selectedValue to show the picked option separately.

Don't

Stretch chips to fill width — they're meant to fit their content. If a control needs full width, use a Button or Select Field instead.

Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Semantic names: container, Placeholder, Close, Chevron Down.
C2 Variant & Property Naming Requires Rework Split across two components. with icon uses yes/no. Dropdown uses type="with active time".
C3 Token Coverage Ready All colors, radii, spacing, and typography bound to tokens.
C4 Native Mappability Ready Maps to custom pill on iOS and FilterChip/InputChip on Android.
C5 Interaction State Coverage Requires Rework No pressed / disabled / error states. Selected is implied by style=filled.
C6 Asset & Icon Quality Requires Rework Leading slot is a hardcoded 24px gray circle — should be a swappable Avatar/Icon instance.
C7 Code Connect Linkability Needs Refinement Blocked by C2 consolidation.
Variants Inventory (0 total)

SourceStyleLeadingTrailingNode ID
FilterFilled (primary)AvatarClose18336:22244
FilterFilled (primary)——18336:22253
FilterLightAvatarClose18336:22257
FilterLight——18336:22266
FilterOutlineAvatarClose18336:22270
FilterOutline——18336:22279
Filter w/ DropdownLight—Chevron18336:22292
Filter w/ DropdownLight (w/ selected value)—Chevron18336:22284
1.0.0 — April 2026Major
Initial Assessment · nodes 18336:22243 + 18336:22283
Assessed as Chip — Two Figma components ("Filter" with 6 variants, "Filter with Dropdown" with 2 variants) share the same pill anatomy. Recommended rename + consolidation into a single Chip component with semantic slot props. Documented
Initial
Two-component split, mismatched schemas — Filter uses type + with icon. Dropdown uses type="with active time". Booleans are yes/no. Should consolidate to style / leading / trailing + optional selectedValue. Open
C2 Open
No pressed/disabled/error states — Engineers must improvise these affordances. Open
C5 Open
Leading slot is hardcoded placeholder — 24px gray circle instead of a swappable Avatar/Icon instance. Open
C6 Open
Code Connect mappings — Blocked by C2 rename + consolidation. Open
C7 Open