Design System
Components

FilterPill

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

Figma description · filter-pillOpen in Figma ↗

A pill-shaped selector for categorising or filtering content, with a trailing chevron indicating a dropdown or sheet.

Use for: Horizontal filter rows inside section headers or above content lists — where the user selects a category, time range, or filter value from a set of options.

Not for: Toggleable selections within a content body — use chips instead. Not for navigation between views — use tab-pill instead.

Choosing: Use inverse=false on light surfaces. Use inverse=true on dark or midnight surfaces. Set state=selected when a filter value has been applied — the border darkens to signal active state. Set state=disabled to prevent interaction without removing the pill from the layout.

Rules: Height is fixed at 40px — do not resize. Width hugs the label; the label is single line only and never wraps. Do not use filter-pill for selections where the user toggles between items directly — use chips. On mobile, the pill supports a swipe gesture; do not suppress this behaviour. In RTL, layout mirrors automatically.

Props
import SwiftUI
import EandTokens

// V1.2 filter-pill: transparent, 40 tall, min 72 wide, 1pt stroke, padding 12 start /
// 8 end, gap 2; body/md label + chevron-down 16 in a 20pt box. Selected darkens the
// stroke and ink; only inverse + selected fills.
struct FilterPill: View {
  let label: String; let selected: Bool
  var body: some View {
    HStack(spacing: EandSpacing.spacing2xs) {
      Text(label).font(.system(size: EandTypography.bodyMd.size))
      Image(systemName: "chevron.down").font(.system(size: EandIcon.md))
        .frame(width: EandIcon.lg, height: EandIcon.lg)
    }
    .foregroundColor(selected ? EandColor.filterPillTextDefaultSelected : EandColor.filterPillTextDefaultDefault)
    .padding(.leading, EandSpacing.md).padding(.trailing, EandSpacing.sm)
    .frame(minWidth: EandScale.scale72, minHeight: EandTabs.heightMd)
    .overlay(Capsule().strokeBorder(
      selected ? EandColor.filterPillBorderDefaultSelected : EandColor.filterPillBorderDefaultDefault,
      lineWidth: EandBorder.sm))
  }
}

When to use

  • Use above a list or grid for a filter that opens a menu or a BottomSheet of options. selected marks the active pill.
  • Use inverse on brand-red and midnight surfaces.
  • Don't use for a filter that toggles in one tap — that is a Chip.

Props

PropTypeDefaultDescription
disabled?boolean—
inverse?boolean—Inverse color scheme for dark (midnight/brand) surfaces (Figma inverse=true).
onClick?(() => void)—
selected?boolean—Figma state=selected — the pressed/active pill state.

Design

Figma source: filter-pill — etisalat Consumer App DSL V1.2

  • Height tabs/height/md (40), minimum width scale/72, pill, 1px stroke filter-pill/border/<scheme>/<state>.
  • No fill, except when inverse and selected (filter-pill/surface/inverse/selected).
  • Padding 12 at the start and 8 at the end, gap 2; a body/md label and a 16px chevron-down in a 20px icon box.

Chip

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

Checkbox

Square selection mark at md (20) or sm (16), with the icon-set check, on default or inverse surfaces.

On this page

When to usePropsDesign