KeepNeeds Refinement
Title Bar Component link

A small section header with a title, optional subtitle, and an optional trailing action.

In Context

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

Send Money
Live Preview
9:41
Title
Properties
leading icon
trailing icon
leading control
subtext
title block
DS Health
Reusable
Pass
Navigation title bar used across every screen in the app. Boolean property toggles cover all common configurations: back arrow, trailing action, subtext URL, CTA control, and large header block.
Self-contained
Pass
Carries its own status bar stub, title row, icon slots, subtext, and optional header block. Background color and all text/icon colors are token-bound. No external dependencies.
Consistent
Partial
Boolean properties use yes/no instead of true/false (C2). leading control only available when leading icon=yes and trailing icon=no -- implicit dependency not expressed in property schema.
Composable
Pass
Fits as the top element on any screen. Nests below the system status bar. Content area sits directly below the title bar. Title block expands naturally when toggled on.
Behavior
State iOS Android Figma Property Notes
Default Yes Yes 5 boolean properties Navigation bar. No interaction states beyond tap targets on icons and control text.
Open Issues
  • Boolean properties use yes/no strings. leading icon, trailing icon, leading control, subtext, title block — all incompatible with Swift Bool / Kotlin Boolean for Code Connect. C2 · Variant & Property Naming
  • Trailing icon is a placeholder RECTANGLE. The 24×24 icon-placeholder blocks instance swap — native icon slot mapping can't be wired until this becomes a swappable Icon instance. C6 · Asset & Icon Quality
  • Code Connect mappings not registered. Blocked until boolean values and placeholder rectangles are fixed. C7 · Code Connect Linkability
Design Recommendations
  • Rename boolean values from yes/no to true/false. Direct native boolean mapping eliminates the string-to-bool layer when wiring Code Connect. Rename
  • Replace trailing icon placeholder with a real Icon instance. Drop in an actual icon from the DS library (e.g. more/ellipsis, share, search) so product teams can instance-swap without editing the master. Slot
  • Make leading control dependency explicit. Today it requires leading icon=yes and trailing icon=no — document it in the spec or promote it to a separate property so the constraint is enforced, not assumed. Docs
  • Add a dark / transparent variant. For screens with hero images or gradient backgrounds (home, campaign pages, onboarding), the current opaque bar is wrong — a transparent variant lets the hero breathe through. Property
  • Document the showAsset property. Currently only available when title block=yes; its purpose (background image behind the title) should be explicitly described in the component spec. Docs
Styles
Standard
DES DEV

Standard title bar without title block. Status bar (44px) + title row with optional icons, control, and subtext. Height ranges from 84px to 100px depending on subtext.

9:41
Title
Properties
Leading icon
Trailing icon
Leading control
Subtext
Properties
Variant Standard
Leading icon yes
Trailing icon no
Leading control no
Subtext no
Colors
Surface #1972F9
Title #FFFFFF
Header #FFFFFF
URL chip #F6F9FDCC (80% alpha)
Icon #FFFFFF
CTA label #FFFFFF
Layout
Bar height 64px
Padding H 24px
Padding V 12px
Icon size 24 × 24
Typography
Title style Primary/Headlines/Light/Area
Title font Proxima Soft Semibold · 26 / 31 · +0.85
URL style Primary/Label/Light/Fine
URL font Proxima Soft Semibold · 12 / 12 · +0.5
Colors by State

Single color scheme -- no appearance modes. All colors bound to main/title-bar/color/ tokens. Display/navigation component with no state-driven color changes.

Role Token Value
Background main/title-bar/color/bg #1972F9
Title label main/title-bar/color/label-title #FFFFFF
Header label main/title-bar/color/label-header #FFFFFF
Subtext / URL main/title-bar/color/label-url #F6F9FDCC (80% opacity)
CTA text main/title-bar/color/label-cta #FFFFFF
Icon main/title-bar/color/icon #FFFFFF
With Title Block
DES DEV

Title bar with expanded header block (72px) below the title row. Used for screens with prominent section headers. Adds "Header" text at 26px Semibold.

9:41
Title
Header
Properties
Leading icon
Trailing icon
Leading control
Subtext
Properties
Variant With Title Block
Leading icon yes
Trailing icon no
Leading control no
Subtext no
Colors
Surface #1972F9
Title #FFFFFF
Header #FFFFFF
URL chip #F6F9FDCC (80% alpha)
Icon #FFFFFF
CTA label #FFFFFF
Layout
Bar height 64px
Padding H 24px
Padding V 12px
Icon size 24 × 24
Typography
Title style Primary/Headlines/Light/Area
Title font Proxima Soft Semibold · 26 / 31 · +0.85
URL style Primary/Label/Light/Fine
URL font Proxima Soft Semibold · 12 / 12 · +0.5
Layout
Role Token
Status bar height 44px
Title row padding H 20px
Title row padding V 12px
Leading icon size 24 x 24
Trailing icon size 24 x 24
Title block height 72px
Title block padding H 24px
Total height (no subtext, no block) ~84px
Total height (with subtext, no block) ~100px
Total height (with block) ~156--172px
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:titlebar:1.0.0")
}

Import

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

Package not yet published. These are the planned distribution paths.

Property Mapping
Figma PropertySwiftUICompose
leading icon (yes/no) .ebLeadingIcon(Image?) leadingIcon: @Composable (() -> Unit)?
trailing icon (yes/no) .ebTrailingIcon(Image?) trailingIcon: @Composable (() -> Unit)?
leading control (yes/no) .ebLeadingControl("Done") leadingControlText: String?
subtext (yes/no) .ebSubtext("m.gcash.com") subtext: String?
title block (yes/no) .ebTitleBlock("Header") titleBlock: String?
SwiftUI
ios/Components/TitleBar/EBTitleBar.swift
Jetpack Compose
android/components/titlebar/EBTitleBar.kt
Usage Snippets Planned API
Basic (title only)
EBTitleBar("Send Money")
EBTitleBar(
    title = "Send Money"
)
With back arrow
EBTitleBar("Send Money")
    .ebLeadingIcon(Image(systemName: "arrow.left"))
EBTitleBar(
    title = "Send Money",
    leadingIcon = { Icon(Icons.Default.ArrowBack, "Back") }
)
Full configuration
EBTitleBar("GCash")
    .ebLeadingIcon(Image(systemName: "arrow.left"))
    .ebTrailingIcon(Image(systemName: "ellipsis"))
    .ebSubtext("m.gcash.com")
    .ebTitleBlock("My Wallet")
EBTitleBar(
    title = "GCash",
    leadingIcon = { Icon(Icons.Default.ArrowBack, "Back") },
    trailingIcon = { Icon(Icons.Default.MoreVert, "More") },
    subtext = "m.gcash.com",
    titleBlock = "My Wallet"
)
With leading control
EBTitleBar("Edit Profile")
    .ebLeadingIcon(Image(systemName: "arrow.left"))
    .ebLeadingControl("Done")
EBTitleBar(
    title = "Edit Profile",
    leadingIcon = { Icon(Icons.Default.ArrowBack, "Back") },
    leadingControlText = "Done"
)
Accessibility
RequirementiOSAndroid
Minimum touch target 44 x 44 pt (icons and control) 48 x 48 dp (icons and control)
Back button label .accessibilityLabel("Back") contentDescription = "Navigate back"
Trailing icon label .accessibilityLabel("More options") contentDescription = "More options"
Heading semantics .accessibilityAddTraits(.isHeader) on title semantics { heading() } on title
Usage Guidelines

Do

Use EBTitleBar as the top-level navigation element on every screen. Keep the title short and descriptive.

Don't

Nest a title bar inside scrollable content or use it as a section header within a page -- use a section heading component instead.

Do

Use the title block for high-level section headers like "My Wallet" or "Dashboard" where the large text reinforces the current context.

Don't

Show both trailing icon and leading control simultaneously -- they occupy the same trailing slot. Use one or the other.

Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Ready Semantic layer names: title, Title Bar, title-block, Leading Icon, Placeholder.
C2 Variant & Property Naming Needs Refinement All 5 boolean properties use yes/no instead of true/false. leading control has implicit dependency on other properties.
C3 Token Coverage Ready All 6 color roles bound to main/title-bar/color/ tokens.
C4 Native Mappability Ready Maps to NavigationBar (iOS) / TopAppBar (Android, Material 3).
C5 Interaction State Coverage Ready Navigation bar -- no interaction states needed beyond individual tap targets on icons and control.
C6 Asset & Icon Quality Needs Refinement Trailing icon uses icon-placeholder RECTANGLE instead of a swappable icon instance.
C7 Code Connect Linkability Needs Refinement No CLI mappings registered yet.
Code Connect
Aspect Status Notes
Property naming Needs Refinement All booleans use yes/no -- must be renamed to true/false before Code Connect mapping
Asset quality Needs Refinement Trailing icon placeholder RECTANGLE needs replacement with icon instance
State coverage Ready Navigation bar -- no interaction states needed
Native component file Needs Refinement EBTitleBar.swift / EBTitleBar.kt not yet created
Variants Inventory (20 total)

5 boolean properties (leading icon, trailing icon, leading control, subtext, title block) with implicit constraints yield 20 variants: 10 without title block + 10 with title block.

title blockCombinations coveredCount
no10 combos of leading/trailing icon + leading control + subtext10
yesSame 10 combos with title block enabled10
1.0.0 — Major
Initial Assessment -- node 23:175148
Component assessed -- 20 variants documented across 5 boolean properties: leading icon, trailing icon, leading control, subtext, title block. App navigation title bar with brand blue background and white text/icons. All colors bound to main/title-bar/color/ tokens. Documented
Initial
Boolean properties use yes/no -- All 5 boolean properties (leading icon, trailing icon, leading control, subtext, title block) use yes/no instead of true/false. Incompatible with Swift Bool and Kotlin Boolean for Code Connect mapping. Open
C2 Open
Trailing icon uses placeholder RECTANGLE -- icon-placeholder is a 24x24 RECTANGLE instead of a swappable icon instance from the DS icon library. Blocks native icon slot mapping. Open
C6 Open
Code Connect mappings -- No CLI mappings registered yet. Blocked by C2 (boolean naming) and C6 (placeholder icon). Open
C7 Open