Design System
Components

QuickAction

Shortcut tiles for common account tasks, laid out as a two-up grid or a horizontal carousel.

Figma description · quick-actionOpen in Figma ↗

Use for

Tappable shortcut tiles that surface a predefined set of common tasks or service entry points in a grid or carousel. Use when the goal is to give users fast access to high-frequency actions without navigating through a full menu.

Not for

Ad hoc or custom actions — quick-action tiles are drawn from a fixed catalogue of 13 predefined task types. New services require a catalogue entry before they can be used. Do not use for promotional or offer content — use a card component for that.

Choosing

Set grid=true for a fixed-width tile layout. Set carousel=true for a scrollable horizontal row. Do not set both to true at the same time. Set rows=1, rows=2, or rows=3 to control how many rows of tiles are shown in grid mode. Content configurations adapt to what data the backend returns — there are four combinations based on label length and badge availability (2-line with tag, 1-line with tag, 2-line without tag, 1-line without tag). These are not designer choices per tile.

Rules

Each tile is fixed at 147×148px. Do not resize individual instances. The icon sits in the header at the top-left of the tile inside a 40px container with border-radius/3 (12px). The label sits at the bottom of the tile using title/sm (16px semi-bold) with dir=auto — do not override direction on the text layer. The status badge sits in the header at the top-right and reflects live service state — neutral, positive, disabled, warning, or danger. Do not use the badge to show offers or promotions; use badges-status only. Tiles without a status badge hide the badge slot entirely — do not leave an empty badge container visible. For RTL, set direction=rtl at the component level; the label will flip automatically via dir=auto.

Props
import SwiftUI
import EandTokens

// V1.2 quick-action cell: 148pt (row-2), padding 12, r20, raised white, no border.
// Header: 40pt r12 tile + an end-aligned lg badge; title/sm label at the bottom.
// The grid is 2-up; layout=carousel scrolls 147pt cells.
struct QuickActionCell: View {
  let label: String; let icon: Image; var badge: String? = nil
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      HStack(alignment: .top) {
        icon.frame(width: EandIcon.xl, height: EandIcon.xl)
          .frame(width: EandScale.scale40, height: EandScale.scale40)
          .background(EandColor.surfaceBaseDefault, in: RoundedRectangle(cornerRadius: EandRadius.radius4))
        Spacer()
        if let badge { StatusBadge(text: badge, size: .lg) }
      }
      Spacer()
      Text(label).font(.system(size: EandTypography.titleSm.size, weight: EandTypography.titleSm.weight))
    }
    .foregroundColor(EandColor.textDefaultDefault)
    .padding(EandSpacing.md)
    .frame(maxWidth: .infinity, minHeight: EandSection.bodyHeightRow2, alignment: .leading)
    .background(EandColor.surfaceRaisedDefault)
    .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius7))
  }
}

When to use

  • Use on the home screen and account hub to reach frequent tasks in one tap: paying a bill, changing a plan, tracking an order. Prefer the catalogue tasks below.
  • Don't use for top-level destinations (use NavBar), for a single prompt with a description (use ActionBar), or for a catalogue of services (use ServiceCard).

Anatomy

Each tile is 148px tall on a white surface:

  • Header — a 40px icon tile on surface/base/default holding a 24px glyph, with an optional badge at the end, typically <Badge status="positive" size="lg">.
  • Label — title/sm, at the bottom of the tile.

layout="grid" (default) places tiles in columns (2) that fill the row. layout="carousel" scrolls sideways in 147px cells; rows sets how many rows it stacks (1).

Catalogue tasks

Set an item's type and it takes the Figma label and filled glyph. Pass label or icon to override either. The same data is exported as QUICK_ACTION_PRESETS.

typeLabel
quick-payQuick Pay & Recharge
order-trackTrack Your Order
sim-activateActivate SIM
sim-replaceReplace SIM
addon-buyBuy Add-ons
devicesMy Devices
device-buyBuy Devices
plan-changeChange Plan
live-chatLive Chat
contact-usContact us
subscriptionsSubscriptions
mParkingmParking
all-servicesAll Services
<QuickAction
  layout="carousel"
  rows={2}
  items={[
    { type: 'quick-pay' },
    { type: 'plan-change', badge: <Badge status="positive" size="lg">New</Badge> },
    { type: 'live-chat' },
    { type: 'all-services' },
  ]}
/>

Props

PropTypeDefaultDescription
itemsQuickActionItem[]—
columns?number2Grid columns (Figma grid is 2-up).
layout?'grid' | 'carousel'gridFigma grid (default) or carousel (horizontal scroll, 147px cells).
rows?number1Carousel rows (Figma rows).

Design

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

  • Tile (.quick-action-core): 148px tall (section/body/height/row-2), padding 12 (spacing/md), 20px radius (border-radius/7), surface/raised/default.
  • Icon tile 40px (scale/40) at a 12px radius (border-radius/4), with a 32px box around the 24px glyph.
  • Tiles sit 4px apart (spacing/xs) in both layouts.
  • The carousel cell is 147px wide, a value off the scale that Figma leaves unbound.

ListRow

A single data row — a title and subtitle set against a value, price or badge, on a card or as a flat line item.

TopBar

The screen header — an inset rounded card with the status bar, a three-column header row, an optional large title and add-ons such as search, chips and tabs.

On this page

When to useAnatomyCatalogue tasksPropsDesign