v3.1.0
ChipsAction

A pill-shaped button for a quick action — it opens an input and then shows the value, or fills a field in one tap.

3.1 3.1 -- 3.1.5

Overview

ChipsAction is a pill-shaped button that runs one action: it opens an input — a sheet or a modal — and then shows the entered value, or fills a field with a ready-made value in one tap. It comes in two sizes, M and S, and holds a title with optional slots, or an icon alone.

  • 1
    M · Icon + Title
  • 2
    M · Icon
  • 3
    S · Icon + Title
  • 4
    S · Icon

States

Three states — Standard, Disabled and Skeleton — and the interaction on a Standard chip: hover and press, and the focus on the web. Figma calls the first state "Default"; the DS name is Standard. Every colour below is a default — an instance may set any DS colour.

Standard

  • 1
    Fill --background-primary — the fill.--chips-action-fill — the property that carries it.
  • 2
    Start Slot --text-and-icon-primary — the icon, by the root colour.
  • 3
    Title --text-and-icon-primary — the root colour.
  • 4
    Counter --text-and-icon-secondary — its own colour.
  • 5
    Subtitle --text-and-icon-primary — the root colour.
  • 6
    End Slot --text-and-icon-primary — the icon, by the root colour.
  • 7
    Border --border-default — the colour.--chips-action-border — the property that carries it.var(--sp-s2) — the width, drawn inside the box.
  • 8
    Indicator --accent-red2 — the Indicator's own fill; Simple, size L.Off by default; any Indicator style fits.

Hover / Pressed

  • 1
    Overlay --shadow-pressed — over the fill, inside the border.Hover with a pointer and press look the same; press also scales the content — see Animation.

Disabled

  • 1
    Fill --background-primary — unchanged.
  • 2
    Icons --text-and-icon-disabled — both slots.
  • 3
    Text --text-and-icon-disabled — the Title, the Counter and the Subtitle.No Indicator; no hover, no press.
  • 4
    Border --border-default — unchanged.

Skeleton

  • 1
    Fill --skeleton-on-white — an empty pill: no content, no border.
  • 2
    Sweep --pattern-shimmer — the DS sweep; it runs in reverse in RTL.

Focused (web)

  • 1
    Border --border-inform — the ring on :focus-visible.var(--sp-s2) — its width, unchanged.A re-pointed border still shows the focus; no outline ring — except in forced colours, where an outline in system colours stands in.

Anatomy

A pill with one row inside: the start slot, the text, the end slot. Each part is optional, but a chip always shows an icon or a title. The Indicator sits on the corner, outside the row. The Figma slots also take an Avatar — it has no web build yet.

Parts

  • 1
    Start Slot var(--sp-s24) — the slot; an icon or a Number Indicator, centred.Figma 🔴Slot#1. Off by default; the only part of an Icon chip. Optional.
  • 2
    Text Container var(--sp-s4) — left and right padding: the gap to a slot or to the edge.One container (Figma TextContainer) holding the Title line and the Subtitle — see Text Container below. Absent in an Icon chip.
  • 3
    End Slot var(--sp-s24) — an icon, a Number Indicator, the Chevron or the Delete icon.Figma 🔵Slot#2. Off by default. Optional.
  • 4
    Indicator var(--sp-s12) — an Indicator Simple L on the top end corner.Outside the row, so it never moves on press. Off by default; not in Disabled. Optional.
  • 5
    Container --background-primary — the fill.--border-default — the border.var(--sp-s2) — its width, drawn inside the box.The whole pill is the one tap target (Figma: Tap area); its row scales on press — see Animation. Required.

Text Container

  • 1
    Text Container var(--sp-s4) — left and right padding.var(--sp-s0) — top and bottom padding.One container — Figma TextContainer — holding the Title line and the Subtitle as a centred column. Its side padding is the gap to a slot or to the chip's edge. Absent in an Icon chip.
  • 2
    Title Body/Main Body — the text style.--text-and-icon-primary — the root colour.One line; the chip hugs it. An Action chip shows the entered value here. Required in an Icon + Title chip.
  • 3
    Counter var(--sp-s4) — after the Title, on one line with it.Body/Main Body — the text style.--text-and-icon-secondary — its own colour.A number formatted by the product. Off by default. Optional.
  • 4
    Subtitle var(--sp-s0) — under the Title line, no gap.Caption/Caption — the text style.--text-and-icon-primary — the root colour.One line. Off by default. Optional.

Slot content

  • 1
    Icon var(--sp-s24) — any DS icon, in either slot.It takes the root colour.
  • 2
    Number Indicator --accent-red2 — an Indicator Number L, in either slot.It grows with its count; the screen gives the number a word for assistive tech.
  • 3
    Chevron --text-and-icon-primary — chevron-down, in the end slot.The chip opens a choice — a sheet or a modal.
  • 4
    Delete --text-and-icon-primary — close-small, in the end slot.The tap removes the value. A cue, not a second button: the chip stays one target, named "Remove [Title]".

Layout

An M chip with every part on. The chip hugs its content; S changes only the minimum height.

General

  • Container var(--sp-s12) — start and end padding.var(--sp-s0) — top and bottom: the row centres on the minimum height.var(--sp-s96) — the radius: a full pill at every size.var(--sp-s2) — the inside border, outside the layout: it adds nothing to the size.Hugs its content.
  • Text Container var(--sp-s4) — left and right padding: the gap to a slot or to the edge.var(--sp-s0) — top and bottom padding.var(--sp-s4) — Title ↔ Counter.var(--sp-s0) — the Title line ↔ the Subtitle.
  • Slots var(--sp-s24) — the minimum size; a slot hugs its content, centred.var(--sp-s0) — the row gap: the text's own padding spaces it.
  • Indicator var(--sp-s12) — Simple L, flush with the top end corner.Outside the row: it takes no space.

Sizes

  • M var(--sp-s48) — the minimum height.
  • S var(--sp-s40) — the minimum height.Everything else is the same as M.
  • Minimum Width var(--sp-s64) — at either size; an Icon chip is exactly this wide.

Skeleton

  • Icon + Title var(--sp-s124) — the fixed width: there is no title to hug.
  • Icon var(--sp-s64) — the fixed width.
  • Height var(--sp-s48) — M.var(--sp-s40) — S.No border.

RTL

  • 1
    Start Slot At the right edge.
  • 2
    Counter Left of the Title.
  • 3
    End Slot At the left edge.
  • 4
    Indicator On the top left corner.
  • Direction dir="rtl" on the chip or an ancestor mirrors the row. The paddings and gaps are symmetric, and so are chevron-down, close-small and the heart — no glyph flips.

Animation

Motion follows the motion system § 6.1 — pushButton, the press where the scale and the fill move together. Two motions: the press, and the skeleton's shimmer.

Press

Pressed — 95%, frozen
Released — back to rest
Live — hover, press, Tab to it
  • pushButton The content row scales and the overlay comes in, together.The pill keeps its size and the Indicator stays still — the Specification frame's Animation block.
  • 1
    Press var(--component-push-button-press) — 200 ms.var(--curve-standard-ease-in-out) — the curve.transform of the content 100% → 95%, and var(--shadow-pressed) over the fill.
  • 2
    Release var(--component-push-button-release) — the same 200 ms back.95% → 100%, the overlay out.
  • Hover var(--component-push-button-release) — the overlay alone, no scale.Pointer devices only (@media (hover: hover)). A disabled chip and a Skeleton do not react.
  • Value Shown The host replaces the title with the entered value; the chip re-hugs its width in the same frame — no width tween.
  • Focus var(--component-push-button-release) — the ring colour eases with the overlay: both are one box-shadow, so they share its transition.
  • Reduced Motion Handled at the token: motion.css zeroes every --component-* inside prefers-reduced-motion: reduce, so the overlay and the 95% scale apply at once, with no transition; no override of its own.

Skeleton

LTR
RTL — the sweep runs the other way
  • Shimmer var(--pattern-shimmer) — the DS sweep across the pill.It runs in reverse in RTL.
  • Skeleton → Content The host swaps the skeleton for the chip; the chip declares no transition of its own.
  • Reduced Motion var(--pattern-shimmer) — zeroed at the token, so the skeleton holds still.

Usage

ChipsAction sits where a person enters a value quickly — through a sheet the chip opens, or with a ready-made value in one tap. It is a secondary action, on its own or in a row.

  • 1
    A Value Entered In A Sheet The chip opens a sheet or a modal; once the value is entered there, it replaces the title — "Schedule delivery" becomes "20 November, 09:00 AM".The chevron says the chip opens something; on the web the chip carries aria-haspopup="dialog".
  • 2
    Ready-Made Replies A row of Suggest chips over a message: a tap fills it, so there is less to type. Each chip is its own button; the row wraps or scrolls — the host's layout, not the chip's.
  • 3
    ✕ A Selected Look ChipsAction has no Active state. A re-pointed fill that fakes one is never announced as selected — choosing among options is ChipsChoice.
  • 4
    ✕ The Main Action A chip is a quick, secondary action. The step that moves the flow on — "Create request" — is a Button.

Pickup time

When should the courier come?

✓ The value from the sheet, in place of "Schedule delivery"

Message the driver

Ready-made replies

✓ Suggest chips — a tap fills the message

Service

✕ A selected look on action chips — selection is ChipsChoice

Freight

Two movers, today

✕ The screen's main action as a chip — a Button

Accessibility

One button: the whole chip is one focus and one target, and its name is its text — Title, Counter, Subtitle. The screen supplies what the chip cannot know: an Icon chip's label, the Indicator's meaning, and what a Chevron or a Delete tap does.

One button, one name
Icon chip
Opens a sheet
Removes the value
Disabled
Skeleton
Focused (web), frozen
  • 1
    One Button "[Title], [Counter], [Subtitle]" — TalkBack contentDescription + Role.Button; VoiceOver accessibilityLabel + .button.TalkBack: "Breakfast, 12, Schedule delivery, Button, Double-tap to activate." VoiceOver: "Breakfast, 12, Schedule delivery, Button." — no hint of its own for a plain action.The slot icons are not announced — not nodes on TalkBack, accessibilityHidden(true) on VoiceOver, aria-hidden on the web.Web: a <button type="button"> named by its own text, in DOM order, with a .visually-hidden ", " between the parts — so "Breakfast" and "12" never run together into one word.
  • 2
    Indicator Its meaning comes from the screen and follows the text — "new items" for the dot, "2 new items" for a count, never "2" alone.Web: a .visually-hidden phrase after the text; the dot itself is aria-hidden.
  • 3
    Icon Chip The screen's action name — "Favourites", "Call the driver" — never the icon's ("heart"). Web: aria-label, plus the Indicator's meaning when it shows one.
  • 4
    Chevron Hint: TalkBack "Double-tap to choose [field]" — onClick(label = "choose [field]"); VoiceOver "Opens [field] selection."When the sheet closes, the focus returns to the chip, which reads the new value as its name — "20 November, 09:00 AM"; no separate announcement (VoiceOver: .layoutChanged to the chip).Web: aria-haspopup="dialog" for a modal sheet — it takes the focus, so no aria-expanded; a non-modal sheet takes aria-expanded. The field heading is the chip's description (aria-describedby), so a person who lands on it after the sheet hears what the value is.
  • 5
    Delete The name carries the verb on all three platforms — "Remove Courier", with the visible "Courier" inside it; a hint may only supplement it, since hints can be off.After the removal the focus moves first — to the next chip, the previous one when it was the last, or the row's owner (the field heading) when none is left — then "[Title] removed" is announced once, politely.Web: aria-label="Remove Courier"; the page moves the focus with .focus() before the removed node goes.
  • 6
    Disabled TalkBack: enabled = false — "Disabled" after the role, no hint: "Breakfast, Button, Disabled."VoiceOver: .notEnabled — "Dimmed": "Breakfast, Dimmed, Button."; the hint is cleared, so a disabled Chevron chip does not say it opens anything.Both keep it reachable; a double-tap does nothing. It carries no Indicator, so nothing is appended.Web: the native disabled — out of the Tab order, readable in browse mode; no aria-haspopup while disabled.
  • 7
    Skeleton Not announced, not focusable — TalkBack clearAndSetSemantics {}, VoiceOver accessibilityHidden(true) (.isLoading(true) alone does not hide it), web aria-hidden + inert. The loading container announces once, politely.
  • 8
    Focus (Web) --border-inform — :focus-visible turns the ring; ≈ 4.8:1 Day / ≈ 4.7:1 Night against the fill.var(--sp-s2) — its width. It is the chip's own ring, so a row of chips never clips it.The change from the default ring is ≈ 3.8:1 Day / ≈ 2.1:1 Night — informational (2.4.13 is AAA).Forced colours drop box-shadow: a real outline in ButtonBorder stands in, Highlight on focus, GrayText when disabled.
  • Keyboard Tab reaches each chip — a row of chips is a row of Tab stops, not a composite widget. Enter and Space activate.
  • RTL The row mirrors; the name keeps the language's reading order — Title, Counter, Subtitle.
  • Text Scaling And Targets Body/Main Body — the Title and the Counter, scale to 150 %, the DS maximum.Caption/Caption — the Subtitle, the same; Caption inside a control — accepted: the typography rules allow it for a control's secondary line (owner, 2026-11-12).var(--sp-s44) — the minimum target in the typography rules.var(--sp-s48) — the M height, above it.var(--sp-s40) — S, below that floor and above WCAG 2.5.8's 24 × 24, as Button S; the SP modes lift it to 52 at 130 % and 60 at 150 % — an accepted exception, as Button S (owner, 2026-11-12).var(--sp-s64) — every chip's minimum width.
  • Long Text The chip is capped at its container's width; an over-long Title or Subtitle ends in an ellipsis on the screen, and the spoken name stays whole.
  • Reduced Motion The overlay and the 95% scale apply at once, with no transition, and the shimmer holds still — all zeroed at the token.
  • Contrast --background-primary — the default fill the figures below are for.--text-and-icon-primary — the Title, ≈ 17.8:1 Day / ≈ 17.0:1 Night.--text-and-icon-secondary — the Counter, ≈ 5.25:1 / ≈ 7.92:1.--text-and-icon-disabled — below the floor on purpose: a disabled control is exempt, and its state is announced.A re-pointed fill keeps the Title, the Counter and the Subtitle at 4.5:1 or more and the ring at 3:1 — the Counter's colour is re-pointed with the root colour.