ActionBar

import SwiftUI
import EandTokens

// action-bar: 72pt, r20, padding 0/16, gap 12. 40pt r12 leading tile, title/xs over a
// body/md description (both the scheme ink), one trailing trigger: a button, a switcher
// or a 20pt chevron in a 24pt box.
struct ActionBar: View {
  let title: String; let subtitle: String
  var body: some View {
    HStack(spacing: EandSpacing.md) {
      Image(systemName: "headphones")
        .frame(width: EandScale.scale40, height: EandScale.scale40)
        .background(EandColor.surfaceBaseDefault, in: RoundedRectangle(cornerRadius: EandRadius.radius4))
      VStack(alignment: .leading, spacing: 0) {
        Text(title).font(.system(size: EandTypography.titleXs.size, weight: EandTypography.titleXs.weight))
        Text(subtitle).font(.system(size: EandTypography.bodyMd.size))
      }
      .lineLimit(1)
      Spacer(minLength: 0)
      Image(systemName: "chevron.right").font(.system(size: EandIcon.lg))
        .frame(width: EandIcon.xl, height: EandIcon.xl)
    }
    .foregroundColor(EandColor.textDefaultDefault)
    .padding(.horizontal, EandSpacing.lg).frame(height: EandScale.scale72)
    .background(EandColor.surfaceRaisedDefault)
    .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius7))
  }
}

When to use

• Use for a row the user acts on: a settings entry, a prompt to top up, a shortcut into a flow, a feature toggle. Figma points tappable rows here rather than to the list item.
• Don't use for read-only data such as a balance or a price (use ListRow), or for a grid of shortcuts (use QuickAction).

Anatomy

• Leading (optional) — icon, an icon or image in a 40px tile.
• Text — title in title/xs and subtitle in body/md, both in the scheme ink, each a single line that truncates.
• Trigger — one of:
  • chevron: a trailing chevron; the whole bar becomes the tap target, handled by onClick.
  • action: a trailing node, typically a Button.
  • switcher: a Switcher; pass true or the Switcher props.
• Stack — stack adds two glass layers that peek out below the bar, for a pile of related prompts. It renders with the inverse scheme only.

Choosing a surface

colorScheme sets the ink. When it is unset, it follows the surface: the glass and midnight surfaces and white-transparent are inverse, the rest default.

<ActionBar
  surface="midnight-raised"
  title="Running low on data"
  subtitle="Add 5 GB for AED 25"
  action={<Button size="sm">Top up</Button>}
/>

<ActionBar title="Wi-Fi calling" subtitle="Call over any network" switcher={{ defaultChecked: true }} />

Props

Design

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

• 72px tall (scale/72), 16px side padding (spacing/lg), 20px radius (border-radius/7), 12px gap (spacing/md).
• Leading tile: 40px at border-radius/4, on surface/base/default, or white/a15 on the inverse scheme.
• The description binds text/default/default (or text/default/inverse), the same ink as the title, not a subtle step.
• The chevron is a 20px glyph in a 24px box.
• Stack: two 64px layers at a 16px radius (border-radius/6) on surface/glass/white/md with a blur, inset 6 and 12px, each peeking 10px below the one above, for a 92px total.