ToggleChip

An on/off pill button for filters.

Overview

A filter the person switches on and off, usually one of several side by side.

Toggle

Do
import { useState } from "react";
import { Cluster, ToggleChip } from "@hackcove/ui";

function Example() {
  const [on, setOn] = useState(["Vintage"]);
  const toggle = (name: string) =>
    setOn((now) => (now.includes(name) ? now.filter((n) => n !== name) : [...now, name]));
  return (
    <Cluster gap="xs" wrap>
      {["Charity", "Vintage", "Books"].map((name) => (
        <ToggleChip key={name} pressed={on.includes(name)} onClick={() => toggle(name)}>
          {name}
        </ToggleChip>
      ))}
    </Cluster>
  );
}
A filter is a ToggleChip: pressed shows whether it is on, and the caller toggles it in onClick.
Don't
import { ToggleChip } from "@hackcove/ui";

<ToggleChip pressed={false}>Clear filters</ToggleChip>
A chip that does something once, such as clearing the filters, is an action: use a Button.

Dot

Do
import { Cluster, ToggleChip } from "@hackcove/ui";

<Cluster gap="xs" wrap>
  <ToggleChip pressed dot="#7c3aed">
    Vintage
  </ToggleChip>
  <ToggleChip pressed={false} dot="#0891b2">
    Books
  </ToggleChip>
</Cluster>
dot is a category colour before the label, so a chip matches its marker elsewhere.

Usage

  • pressed is the state; the caller flips it in onClick.
  • Put chips that filter one thing in a FilterGroup, so the set has a name.
  • dot is a category colour before the label, for a chip that matches a marker elsewhere.
  • An action is a Button; a setting in a form is a Checkbox.

Accessibility

  • A native <button type="button"> with aria-pressed, so a screen reader announces it as a toggle button and its state.
  • The dot is decorative and hidden from assistive tech.
  • The focus ring comes from the component.

API

ToggleChip

An on/off pill button for filters. pressed sets its state; dot adds a leading colour dot. The caller toggles it in onClick.

dot

A CSS colour for a leading dot (e.g. a category colour); no dot when omitted.

Type
string
pressed required
Type
boolean