Components

ProgressBar

A 4px progress fill in positive green, with no track and square ends.

Figma description · progress-bar-coreOpen in Figma ↗

Use for

A low-level progress indicator used to represent a proportion of consumption or completion — data usage remaining, plan fill level, or any percentage-based status. Used as an atom inside plan-usage-bar and similar components. Do not use standalone in product screens; always embed it within a containing card or bar component.

Not for

Step-based progress flows or onboarding indicators — use a dedicated stepper component for those. Loading or indeterminate states — this component only represents a known percentage value. Any context where a label or value needs to be attached directly to the bar — the containing component handles labelling.

Choosing

Set progress to the appropriate value in increments of 5 (5 through 100) matching the percentage of data or usage remaining. The bar fill uses color/text/positive/subtle (green, #54bc72) by default. The bar color is overridden by the parent component based on usage state — green above 30% remaining, orange below 30% or within 3 days of expiry. Do not override the bar color directly on this component.

Set direction=ltr for English — the bar fills from the left. Set direction=rtl for Arabic — the bar fills from the right. Do not manually mirror the bar; the direction property handles it.

Rules

The component is fixed at 4px height (scale/4). Do not resize the height. Width is set by the parent container — always place this component inside a frame set to fill width; do not set a fixed width on the instance. The bar is a single absolutely positioned layer that fills from one edge to the opposite based on the progress value. Do not add additional layers inside the bar. The track background is inherited from the parent container — do not add a background to the bar itself. All values are tokenized — do not hard-code colors or dimensions.

Props

ValueTone

import SwiftUI
import EandTokens

// progress-bar-core: a 300×4 clip holding one green fill — no track colour, no radius.
struct ProgressBar: View {
  let value: Double   // 0…1
  var body: some View {
    GeometryReader { geo in
      Rectangle().fill(EandColor.textPositiveSubtle)
        .frame(width: geo.size.width * min(max(value, 0), 1))
    }
    .frame(width: 300, height: EandScale.scale4)
    .clipped()
  }
}

When to use

Use for the determinate progress of a single quantity, on a surface that already frames the bar. value runs from 0 to 100 and is clamped.
Don't use for a plan allowance — that is PlanUsageBar. Not for the steps of a flow; use Stepper.

The bar has no track of its own, as in Figma. Pass style to add a background if a surface needs one. tone (accent, positive, warning, danger) is a code-only override; Figma publishes the green fill only.

Props

Prop	Type	Default	Description
`tone?`	`'warning' \| 'positive' \| 'danger' \| 'accent'`	—	Optional fill override; omit for the Figma V1.1 default (text.positive.subtle green).
`value?`	`number`	`50`

Design

Figma source: progress-bar-core — etisalat Consumer App DSL V1.2

A 4px (scale/4) clip holding one fill in text/positive/subtle.
No corner radius on the container or the fill.
The fill grows from the inline start, so it mirrors in RTL.

MoreItems

The "+N" overflow circle that closes a row of logos.

Stepper

Segmented step progress — 2–8 pill segments, completed ones filled, with an inverse scheme for dark surfaces.

On this page

When to use Props Design