StatusIndicator
A short status label with a leading dot — plain, on a tinted pill, or on glass over imagery.
status-indicator-typeOpen in Figma ↗A status label combining a dot icon and a text label to communicate state at a glance.
Use for: Surfacing the status of a deal, offer, plan, or item — such as active, expiring, unavailable, or pending.
Not for: Progress or completion tracking — use a progress indicator instead. Categorising or tagging content — use a tag or badge component. Communicating form validation errors or inline feedback — use a form error component. Do not use as a decorative element or to add colour without a corresponding semantic state.
Choosing: Use basic on light flat surfaces. Use glass over light imagery or translucent backgrounds. Use glass-dark over dark imagery or dark surfaces. Use pill when the status needs stronger visual containment, such as inside a card footer or inline with dense content. Set status to match the semantic meaning — positive, warning, danger, or neutral — never for decorative purposes.
Rules: Do not use status colour alone to convey meaning — the text label must always be present. Do not override status token colours. The dot icon is not interchangeable with other icons.
import SwiftUI import EandTokens // status-indicator: 8pt dot (in a 12pt box) + badge/md label, padded 4 start / 8 end. // basic 16 tall, no surface, label in the status ink // pill 24 tall, status tint, default ink // glass 32 tall, white 5% + frost (glass-dark: inverse ink) struct StatusIndicator: View { enum Kind { case basic, pill, glass } let label: String var kind: Kind = .basic var body: some View { HStack(spacing: 0) { Circle().fill(EandColor.statusIndicatorTextPositive) .frame(width: EandIcon.xs, height: EandIcon.xs) .frame(width: EandIcon.sm, height: EandIcon.sm) Text(label) .font(.system(size: EandTypography.badgeMd.size)) .foregroundColor(kind == .basic ? EandColor.statusIndicatorTextPositive : EandColor.textDefaultDefault) } .padding(.leading, EandSpacing.xs).padding(.trailing, EandSpacing.sm) .frame(height: kind == .basic ? EandScale.scale16 : kind == .pill ? EandScale.scale24 : EandScale.scale32) .background(kind == .pill ? EandColor.statusIndicatorSurfacePositive : kind == .glass ? EandColor.surfaceGlassWhiteXs : .clear) .background { if kind == .glass { Rectangle().fill(.ultraThinMaterial) } } // glass frost .clipShape(Capsule()) } }
When to use
- Use to state the current condition of an item — active, expiring, suspended — next to its title in a card, a list row or a banner.
- Don't use for offers, counts or promotional labels; that is Badge. Not for the outcome of an action (PageTitle) or for a message that needs an action (Alert).
Choosing a type
| Type | Surface | Height | Use for |
|---|---|---|---|
basic | none; the label takes the status colour | 16px | Inline, beside other text |
pill | status-tinted fill | 24px | When the status needs more weight on a plain surface |
glass | white glass with a backdrop blur | 32px | Over light imagery (dark label) |
glass-dark | the same glass | 32px | Over dark imagery (white label) |
Match status to the real condition: positive, warning, danger or neutral. The label is
children (default "Status"); dot={false} removes the leading dot.
On glass-dark, the neutral dot keeps the midnight ink the published symbol binds, so it reads
weakly on dark imagery. Whether it should turn white is an open design question.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
dot? | boolean | true | Figma circle — the leading dot. |
status? | 'warning' | 'positive' | 'danger' | 'neutral' | positive | |
type? | 'glass' | 'basic' | 'pill' | 'glass-dark' | basic | Figma type. glass-dark is Figma's Glass-dark. |
Design
Figma source: status-indicator-type — etisalat Consumer App DSL V1.2
- Every type wraps
.status-indicator-core: 16px tall, padding-start 4 (spacing/xs), padding-end 8 (spacing/sm), an 8pxdot-filledglyph in a 12px icon box, then the label inbadge/md. - The dot and the
basiclabel usestatus-indicator/text/<status>; theneutraldot bindstext/default/default. pill: padding-blockspacing/xs,border-radius/9, fillstatus-indicator/surface/<status>, labeltext/default/default.glassandglass-dark: padding-blockspacing/sm,border-radius/9,surface/glass/white/xswith a backdrop blur ofeffects/glass/lg/frost; labeltext/default/defaultortext/default/inverse.- Padding is logical, so the dot moves to the right in RTL.