Design system Selectors

Filter chip

The record of an applied filter: grey, quietly rounded, removed by its cross. It appears when a filter lands and leaves when it is lifted.

.mk-chip

Overview

The filter chip records an applied filter. It appears when a filter lands, wears the applied value, and pressing it removes the filter — the cross says so before the press. It is grey on purpose: the chip is the reader's own tool and must not borrow the status family's tint. Remove one below.

Usage

  • Represent one applied filterThe chip appears only after a filter is committed and names the value currently constraining the results.
  • Remove the filter directlyThe trailing control clears that one filter. Once cleared, the complete chip disappears rather than entering a Removed state.
  • Keep filter and status semantics separateThe neutral treatment identifies a result-control tool. Do not use semantic status colours or reuse the chip as a read-only label.

Anatomy

1
2 3
  1. 1The chip. The grey wash on the quiet hairline at the 4px compact radius — rounder than a control, flatter than a pill. An invisible expander carries the target to 44px.
  2. 2The filter value. The value that is currently applied, written in the same words the reader chose in the filter.
  3. 3The cross. 12px from the registry, riding the value in the same ink. It is not a separate control — the whole chip removes, and the accessible name says so.

Variants and states

One form owns the pattern: the applied filter. The experiences catalogue still wears an older aria-pressed toggle form on its flag filters; it stays in the layer until that surface is redesigned, and new work does not take it.

States

Every state below is the real component wearing that state, not a picture of it.

StateSpecimenWhat changes
Rest The grey wash, the value, the cross at 70%.
Hover The wash deepens and the cross comes to full ink.
Keyboard focus The standard 2px camel outline at 2px offset.

Do and don't

Do

The chip records what is applied and offers one act: lifting it.

Don't

The pressable facet chip in the status label family's tint — the pattern that left the product with the facet rail. Choosing lives in the rail; the chip only records.

Copy

  • The applied value, verbatimThe chip says what the rail applied, in the rail's own words — no facet name prefix when the value alone is unambiguous.
  • The name says the actThe accessible name is "Remove the filter: …" — the press is a removal, and the reader hears that.

Accessibility

  • One button, one actThe whole chip is the remove button; the cross is aria-hidden decoration on it.
  • The removal is announcedThe narrowed list's count speaks through a polite live region.
  • Focus survives the removalWhen the pressed chip leaves, focus moves to the next chip — never dropped to the page's top.
  • 44px through the expanderThe visible face stays compact; the target does not.

When to reach for something else

  • Choosing the filter itselfThe filter rail's facet controls do that — the chip only records what they applied.
  • A submitted answerUse a Checkbox — a form remembers; a chip narrows now and leaves.
  • A state on an objectUse Label. A chip is the reader's act, never the object's condition.

Markup

<button class="mk-chip" type="button" aria-label="Remove the filter: Trade">
  Trade
  <svg class="mk-chip-x" data-mk-icon="close" aria-hidden="true"></svg>
</button>