FilterChip

In the app

A toggle for list filters. Off it is an outline button; on it turns accent with a wash, so an active filter is visible from across the room.

@varick/ui/components/filter-chipAdded 2 Sept 2026

Usage

import { FilterChip } from "@varick/ui/components/filter-chip";

export function Example() {
  return (
    <FilterChip pressed={showFailed} onPressedChange={setShowFailed} count={2}>
      Failed
    </FilterChip>
  );
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
pressed	boolean	uncontrolled	Controlled state, with onPressedChange.
defaultPressed	boolean	false	Initial state when uncontrolled.
tone	'default' \| 'danger'	'default'	Danger reads red on and off, for failed and error filters.
count	number	undefined	Right-aligned figure.
children	ReactNode	required	The filter name, optionally with a leading icon.

Accessibility

A button with aria-pressed, so the on state is announced. Colour is not the only signal: the count and border change too.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-mid);
  background: #FFFFFF;
}
.filter-chip:hover { border-color: var(--hairline-hover); color: var(--fg-high); }
.filter-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-fade); color: var(--accent); }
.filter-chip.danger { color: var(--danger); }
.filter-chip.danger[aria-pressed="true"] { border-color: var(--danger); background: var(--danger-soft); }