Filter Chip

A generic filter/tag pill in two forms — a removable button with an accessible "Remove X filter: Y" name, or a navigational link with a selected state. Renders template-parts/atoms/filter-chip.

One pill, two forms. Removable (the default, no url): the whole pill is a <button> with a ✕ glyph, and its visible text is the bare filter value only (matches the Figma "Filtered-by" spec, node 3814-16210) while remove_label overrides the accessible name, so screen reader users still hear which filter is being removed. Used by the Insights Block's active-filters bar — blocks/insights/script.js's own renderActiveFilters() builds this same markup dynamically after each AJAX refresh rather than calling this template part directly (client JS can't call PHP).

Navigational (url set): an <a> with no ✕, since activating it goes somewhere rather than removing something — a remove affordance on a plain link would be a lie. Pair with selected for the filled active state (Figma 4048-17316), which also sets aria-current="page". Used by the Site Search page's "FILTER RESULTS BY" row, where the pills are real links so the page works with JS off.

A row of removable chips

Navigational chips, one selected

The Site Search filter row (Figma 4048-17313). The selected pill is filled and carries aria-current="page"; the others are ordinary links.

Playground

Change a value below to update the preview live.

Usage

get_template_part( 'template-parts/atoms/filter-chip', null, [
    'label'        => 'Litigation',                    // required — visible chip text (bare value, no prefix)
    'remove_label' => 'Remove type filter: Litigation', // required — accessible name (aria-label)
    'key'          => 'type',                           // optional — data-filter-key, for a caller's
                                                         // own click-delegation handler to identify
                                                         // which filter this chip represents
    'classes'      => '', // optional, appended alongside the filter-chip class
] );

// Navigational form — set `url` and the atom renders an <a> with no ✕ glyph,
// because activating it goes somewhere rather than removing something.
get_template_part( 'template-parts/atoms/filter-chip', null, [
    'label'      => 'Professionals',                   // required — visible chip text
    'url'        => '/?s=litigation&search_type=professionals', // required for the link form
    'link_label' => 'Show only Professionals results', // optional — accessible name; defaults
                                                        // to the visible label
    'selected'   => true,                               // optional — filled/active state; also
                                                        // sets aria-current="page"
] );