Action chip

In context

Purpose

An ActionChip is a lightweight choice a user can tap instead of type: a category while recording a sale, a "Walk-in" shortcut, a filter on a list. Selected chips lift onto a soft teal; unselected stay quiet white — so the current choice is obvious.

Anatomy

• Pill — a rounded, tappable container (≥ 40dp, with hit-slop to a 44dp target).
• Icon (optional) — a small leading glyph (~16).
• Label — one or two words.
• Selected state — teal tint + teal edge + semibold label.

Variants

• Unselected / selected — quiet white vs teal-tinted active.
• disabled — dimmed and non-tappable, for a choice not available yet.
• With or without a leading icon.

Code

import { ActionChip } from '@daytwo/components'

const [cat, setCat] = useState('food')

{['food', 'drinks', 'other'].map((c) => (
<ActionChip
  key={c}
  label={c}
  selected={cat === c}
  onPress={() => setCat(c)}
/>
))}

When to use

• A row of 2–8 peer choices (categories, quick filters, shortcuts).
• Anywhere tapping beats typing for the user.

When NOT to use

• Switching one view of a screen — use a SegmentedControl.
• A longer single-choice list with descriptions — use a ChoiceList.
• Showing a state you can't tap — use a StatusLabel.

Good vs bad

• Good: four category chips under a sale amount — one tap sets the category, the selected one is clearly teal, no keyboard needed.
• Bad: twelve chips wrapping across four rows as the primary way to pick a category — past ~8 it stops being scannable; use a dropdown or search instead.

Edge cases

Tokens used