Design System
Components

AddTrigger

A full-width 72px glass panel with an “add” action — a red disc with a plus, then the label.

Figma description · add-triggerOpen in Figma ↗

A full-width dashed trigger used to prompt the user to initiate a creation or customisation flow — such as building their own deal.

Use for: Inside a section body slot as a contextual entry point for user-generated or customisable content — specifically where the user can compose their own deal or bundle.

Not for: General creation actions anywhere on a page — use a button with type=primary instead. Not for navigation — use action-bar instead.

Choosing: Use surface=default on light sections (renders with a dark glass fill). Use surface=inverse on dark or midnight sections (renders with a light glass fill).

Rules: Width is fixed at 285px — do not resize. Height is fixed at 72px. The label is single line only and never wraps. The dashed border is part of the component — do not override it. In RTL, the layout mirrors automatically. Always place inside a section body slot; never place directly on a screen or floating over content.

Props
import SwiftUI
import EandTokens

// add-trigger: a full-width 72pt glass panel (midnight 7%), r16, padding 16 × 20, no
// border. Centred content: a 16pt red disc holding an 8pt white plus, then the
// button/lg label (4pt inset each side).
struct AddTrigger: View {
  let label: String
  var action: () -> Void
  var body: some View {
    Button(action: action) {
      HStack(spacing: EandSpacing.xs) {
        Image(systemName: "plus").font(.system(size: EandIcon.xs, weight: .bold))
          .foregroundColor(EandColor.textDefaultInverse)
          .frame(width: EandScale.scale16, height: EandScale.scale16)
          .background(EandColor.textBrandDefault, in: Circle())
        Text(label)
          .font(.system(size: EandTypography.buttonLg.size, weight: EandTypography.buttonLg.weight))
          .foregroundColor(EandColor.textDefaultDefault)
          .padding(.horizontal, EandSpacing.xs)
      }
      .padding(.horizontal, EandSpacing.xs)
      .frame(maxWidth: .infinity, minHeight: EandScale.scale72)
      .background(EandColor.surfaceGlassMidnightSm)
      .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius6))
    }
  }
}

When to use

  • Use as the slot that adds another item to a list or group. It fills the width of its container.
  • Use surface="inverse" on dark surfaces.
  • Don't use for a screen's main action — that is a Button. Not for a section's “See all” link; use SectionLink.

Props

PropTypeDefaultDescription
label?stringAdd
surface?'default' | 'inverse'defaultFigma surface: inverse for dark surfaces.

Design

Figma source: add-trigger — etisalat Consumer App DSL V1.2

  • 72px tall (scale/72), padding 16 × 20 (spacing/lg; the 20 is unbound in Figma), border-radius/6 (16), no border.
  • Content: a 16px disc holding an 8px add glyph, then the button/lg label, each with spacing/xs inline padding.
  • Default: surface/glass/midnight/sm, label text/default/default, disc text/brand/default, plus text/default/inverse.
  • Inverse: surface/glass/white/lg, label text/default/inverse, disc button/tertiary/text/inverse/default, plus surface/canvas/midnight.
  • Figma's description still mentions a dashed border; the published symbol has none, and the symbol wins.

Stepper

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

Dismiss

Close control — an X knocked out of a filled circle, at md (24) or sm (20), on default or inverse surfaces.

On this page

When to usePropsDesign