Design System
Components

Chip

Selectable 40px pill in four types — outline, filled, glass and inverse — with an optional leading marker and a removable form.

Figma description · chipsOpen in Figma ↗

A compact interactive element for representing categories, filter options, or selection states.

Use for: Filtering content within a section, selecting one or more categories from a set, or representing a toggleable option in a horizontal scrollable row.

Not for: Navigation between screens — use tab-pill instead. Not for actions with immediate side effects — use a button instead.

Choosing: Use type=outline on light flat surfaces. Use type=filled when the chip needs stronger visual weight on a light surface. Use type=glass over imagery or glass surfaces. Use type=inverse on dark or midnight surfaces. Set state=selected when the option is active — the leading icon automatically swaps to a checkmark and the trailing icon appears. Set state=disabled to remove interactivity without hiding the chip.

Rules: Always group chips in a horizontally scrollable row — do not stack them vertically in isolation. Edit the label via the text property on the instance; do not detach to change copy. In RTL the entire layout mirrors — do not manually adjust icon placement.

Props
import SwiftUI
import EandTokens

// V1.2 chip: 40 tall, min 72 wide, body/md, padding 12 (8 before a 16pt marker).
// Outline = 1pt stroke; selected fills midnight with no stroke.
struct EandChip: View {
  let label: String; let selected: Bool
  var body: some View {
    Text(label)
      .font(.system(size: EandTypography.bodyMd.size))
      .foregroundColor(selected ? EandColor.chipsDefaultOutlineTextSelected
                                : EandColor.chipsDefaultOutlineTextDefault)
      .padding(.horizontal, EandSpacing.md)
      .frame(minWidth: EandScale.scale72, minHeight: EandTabs.heightMd)
      .background(selected ? EandColor.chipsDefaultOutlineSurfaceSelected : .clear)
      .overlay {
        if !selected {
          Capsule().strokeBorder(EandColor.chipsDefaultOutlineBorderDefault, lineWidth: EandBorder.sm)
        }
      }
      .clipShape(Capsule())
  }
}

When to use

  • Use for quick filters and tags that toggle on and off, usually in a row that scrolls sideways. Pass onDismiss for a removable chip, such as an applied filter.
  • Don't use for a filter that opens a list of options — that is a FilterPill. Not for switching views (Tabs) or for a read-only label (Badge).

Choosing a type

typeLook
outline1px stroke, no fill — the default
filledSolid fill, no stroke
glassFrosted fill behind a 20px backdrop blur, for imagery
inverse1px light stroke, for brand-red and midnight surfaces

A selected chip is fill only, with no stroke, in every type.

  • Marker — leadingIcon fills a 16px box (pass a 12px glyph). check shows a check mark while the chip is selected.
  • Removable — onDismiss adds a trailing 20px Dismiss; the label stays a separate button for onClick. dismissLabel names it (default “Remove …”).
  • Deprecated — inverse is an alias for type="inverse". loading still renders a spinner, but V1.2 chips have no loader.

Props

PropTypeDefaultDescription
check?boolean—Show a check mark as the leading marker while selected (Figma marker type=check).
disabled?boolean—
dismissLabel?string—Accessible name for the dismiss button. Defaults to "Remove <label>".
inverse?boolean—Deprecated. Alias for type="inverse".
leadingIcon?ReactNode—Leading marker (Figma .chips.marker type=custom-icon): a 16px box — pass a 12px glyph.
loading?boolean—Deprecated. V1.2 chips have no loader. Still renders a spinner in the marker slot and suppresses clicks.
onClick?(() => void)—
onDismiss?(() => void)—Makes the chip removable (Figma .chips-core-status selected=true): a trailing 20px dismiss that calls this. The label stays a separate button for onClick.
selected?boolean—Figma state=selected (the pressed/active chip).
type?'inverse' | 'filled' | 'outline' | 'glass'—Figma type axis.

Design

Figma source: chips — etisalat Consumer App DSL V1.2

  • Height tabs/height/md (40), minimum width scale/72, pill; label body/md.
  • Padding: 12 / 12 without a marker; 8 · 16px marker · 4 · label · 12 with one; removable 12 · label · 4 · 20px dismiss · 8.
  • Colours are chips/default/<type>/{surface,text,border}/<state>.
  • The 1px stroke appears only on outline and inverse, in the default and disabled states.
  • The Chips page is still marked In review in Figma.

AISearch

The “Ask etisalat” entry point — a Searchbar with an assistant placeholder. Its Figma page is not yet final.

FilterPill

A 40px outlined pill with a trailing chevron, for filters that open a list of options.

On this page

When to useChoosing a typePropsDesign