KeepNeeds Refinement
Segmented Control Button Component link

A single tappable segment inside a Segmented Control. 6 variants across State (Default / Pressed / Disabled) × Active (true / false). Active segments fill brand-blue; inactive segments carry a brand-blue outline. (Assessed in the 2026 Working File.)

Clean atom — complete state matrix
The single-segment atom for the Segmented Control family. Six variants cover the full State × Active matrix — including the pressed-active state — with token-bound fills (active #005CE5, pressed-active #2340A9, disabled #9BC5FD) and a token-bound outline for inactive segments. Booleans are lowercase true/false. Active is retained as the property name (intentional for this component rather than isSelected). Only Code Connect registration remains.
In Context

Not used standalone — the Segmented Control row composes N of these buttons, and the Segmented Control - Group wraps that row with a header and optional subtext.

Live Preview
ActiveInactive
Properties
StateDefault · Pressed · Disabled
Activetrue · false
DS Health
Reusable
Pass
The one segment primitive for every Segmented Control — the row composes N instances at any count, so a single atom covers 2-, 3-, and 4-segment controls.
Self-contained
Pass
Owns its own fill, outline, label, and radius tokens across all six State × Active combinations. No external instance dependencies.
Consistent
Pass
Complete 3 × 2 matrix — State (Default / Pressed / Disabled) × Active (true/false), lowercase booleans. Active segments fill brand-blue, inactive carry the brand-blue outline; pressed and disabled shift the shade predictably.
Composable
Pass
Nests inside the Segmented Control row as an instance, so atom changes propagate to every segment across every item count.
Behavior
State iOS Android Figma Property Notes
Active Yes Yes Active=true Fills brand-blue #005CE5 with a white label. The currently-selected segment.
Inactive Yes Yes Active=false White fill with a 1.5px brand-blue outline and a brand-blue label.
Pressed Yes Yes State=Pressed Touch-down feedback — active darkens to #2340A9; inactive shows a light #F6F9FD (72%) fill under the outline.
Disabled Yes Yes State=Disabled Muted #9BC5FD for both active fill and inactive outline; tap blocked.
Issues
  • Code Connect mappings not registered. The schema and state coverage are settled, so 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
  • v1.0: Active boolean moved to lowercase true/false (from Yes/No), matching the DS boolean standard. (C2)
  • v1.0: State=Pressed, Active=true variant added — the matrix is now the complete 3 × 2 = 6, so an already-active segment has a pressed treatment too (#2340A9). (C5)
  • v1.0: Segment label node renamed from #value to label. (C2)
Recommendations
  • Register Code Connect mapping to EBSegment. Wire State and Active 1:1 to the SwiftUI / Compose segment API, forwarding from the parent EBSegmentedControl. Docs
  • Normalize the Active boolean to true/false. v1.0: Applied — lowercase, matching the DS standard. Rename
  • Complete the State × Active matrix. v1.0: Applied — added the missing pressed-active variant; the atom now ships all six combinations. State
States
Segment
DES DEV

A single ~91 × 40 segment. Active fills brand-blue with a white label; inactive carries a 1.5px brand-blue outline. Pressed and Disabled shift the shade.

Active
Properties
State Default
Active true
Colors
Active bg #005CE5
Active pressed bg #2340A9
Active disabled bg #9BC5FD
Inactive border #005CE5
Inactive pressed bg #F6F9FD
Active label #FFFFFF
Inactive label #005CE5
Layout
Height 40
Padding 12 vert · 16 horiz
Border radius 6 (row-level)
Border width 1.5 (inactive only)
Typography
Label Proxima Soft Bold · 16 / 16 · +0.25
Property Mapping

The segment is composed by the parent Segmented Control; its two properties forward down from the control's selection + enabled state.

Figma PropertySwiftUICompose
Active=true / false isSelected: Bool selected: Boolean
State=Default / Pressed / Disabled derived (isPressed / isEnabled) derived (InteractionSource / enabled)
label Segment.label: String Segment.label: String
SwiftUI
ios/Components/SegmentedControl/EBSegment.swift
Jetpack Compose
android/components/segmentedcontrol/EBSegment.kt
Accessibility
RequirementiOSAndroid
Role Each segment is a .button with the .isSelected trait set on the active one. Apply Role.RadioButton per segment inside the row's Modifier.selectableGroup.
Tap target ≥ 44 × 44 hit area. Extend vertically via .contentShape when the segment is below 44 tall. ≥ 48 dp — Modifier.minimumInteractiveComponentSize().
Disabled Not focusable; .disabled(true) from the parent control. enabled = false; not focusable.
Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Semantic names — container / label. The #value node was renamed to label.
C2 Variant & Property Naming Ready State × Active, lowercase booleans. Active retained as the property name by design.
C3 Token Coverage Needs Refinement Hex values are consistent, but a segmented-control/* token namespace still needs registering.
C4 Native Mappability Ready Maps to a native segment; State derives at runtime, Active forwards from the parent.
C5 Interaction State Coverage Ready Complete 3 × 2 matrix — Default / Pressed / Disabled × active / inactive.
C6 Asset & Icon Quality Not Applicable Text-only segment, no assets.
C7 Code Connect Linkability Not Mapped Unblocked; not yet registered, and the native component does not exist.
Variants Inventory (6 total)

State (Default / Pressed / Disabled) × Active (true / false) = 6. Complete matrix, no gaps.

#StateActiveNode
1Defaulttrue4111:10769
2Pressedtrue4715:18624
3Disabledtrue4111:10758
4Defaultfalse4111:10757
5Pressedfalse4111:10756
6Disabledfalse4111:10755
1.0.0 — July 2026Major
Initial Assessment · node 4111:10773
Component assessed — the single-segment atom for the Segmented Control family. 6 variants across State × Active. Documented
Initial
Active boolean lowercased — Yes/No → true/false, matching the DS standard. Resolved
C2 Resolved
Pressed-active variant added — completes the 3 × 2 matrix; an already-active segment now has a pressed treatment (#2340A9). Resolved
C5 Resolved
Label node renamed — #value → label. Resolved
C2 Resolved
Code Connect — unblocked; not yet registered. Open
C7 Open