Pill filter

A toggleable filter chip. Outlined when off, filled with a remove icon when on.

<x-atlas::pill-filter>

A pill filter is one facet in a filter bar: tap it to apply, tap it again to remove. It always renders a <button>, so wire it to whatever you use for state — a Livewire action, an Alpine toggle, a form submit — and feed the result back in through active.

<x-atlas::pill-filter>In stock</x-atlas::pill-filter>

# Active

active is the component's only state, and it does two things at once: the pill fills with its color, and the icon appears. That pairing is deliberate — a filled pill is an applied filter and the cross tells you clicking it takes the filter away. An inactive pill has no icon at all.

<x-atlas::pill-filter>Available</x-atlas::pill-filter>
<x-atlas::pill-filter active>Applied</x-atlas::pill-filter>

# colors

Nine color tokens are available, the same set as text link. In a filter bar, pick one color for the whole group: if pills differ in color, the fill stops reading as "applied" and starts reading as "category". Save a second color for something that behaves differently, such as a clear-all pill. There is also white, for filters on a dark panel, omitted here because the preview is light.

<x-atlas::pill-filter color="primary" active>Primary</x-atlas::pill-filter>
<x-atlas::pill-filter color="secondary" active>Secondary</x-atlas::pill-filter>
<x-atlas::pill-filter color="accent" active>accent</x-atlas::pill-filter>
<x-atlas::pill-filter color="black" active>Black</x-atlas::pill-filter>
<x-atlas::pill-filter color="info" active>Info</x-atlas::pill-filter>
<x-atlas::pill-filter color="success" active>Success</x-atlas::pill-filter>
<x-atlas::pill-filter color="warning" active>Warning</x-atlas::pill-filter>
<x-atlas::pill-filter color="danger" active>Danger</x-atlas::pill-filter>

# Changing the icon

The default is a cross, which suits the common case where an applied filter is there to be removed. Swap it for a tick when the pill is a multi-select choice that stays put, and set it to null to leave it out. Whatever icon you choose rotates a quarter turn on hover — which reads as a rotating cross and as a wobbling tick, so the cross is the safer default.

<x-atlas::pill-filter active>Remove this filter</x-atlas::pill-filter>
<x-atlas::pill-filter active icon="fas-check">Selected</x-atlas::pill-filter>
<x-atlas::pill-filter active :icon="null">No icon</x-atlas::pill-filter>

# Disabled

There is no disabled prop; the native attribute is merged onto the button and the styles cover :disabled. Use it for a facet that would return no results rather than hiding the facet, so the filter bar stops jumping about between queries.

<x-atlas::pill-filter>Under 50 euro</x-atlas::pill-filter>
<x-atlas::pill-filter disabled>Over 500 euro</x-atlas::pill-filter>

# A row of filters

The component adds no layout of its own — it is an inline-flex button, so the wrapping and spacing of the bar are yours. Add aria-pressed yourself if the pills are toggles rather than links; active is purely visual.

<x-atlas::pill-filter active>Chairs</x-atlas::pill-filter>
<x-atlas::pill-filter active>Oak</x-atlas::pill-filter>
<x-atlas::pill-filter>Walnut</x-atlas::pill-filter>
<x-atlas::pill-filter>Steel</x-atlas::pill-filter>
<x-atlas::pill-filter color="danger" active icon="fas-xmark">Clear all</x-atlas::pill-filter>

# Related components

# Reference

# <x-atlas::pill-filter>

Slots