Coach Stories

Filter pill

A story filter in coach.com's pill shape: category chips that fill ink when on, or a pill that opens a menu of values. The one rounded shape in the hub, so a filter never reads as a call to action.

components/coach/filter-pill.tsx

Examples

Pick a category; Season opens a menu
States

Usage

components/coach/filter-pill.tsx
import { FilterPill } from "@/components/coach/filter-pill";

// Category chips: one on at a time
{categories.map((category) => (
  <FilterPill
    key={category.id}
    pressed={category.id === active}
    onClick={() => setActive(category.id)}
  >
    {category.label}
  </FilterPill>
))}

// A pill that opens a menu of values
<FilterPill menu open={isOpen} onClick={toggle}>Season</FilterPill>

Props

PropTypeDefaultDescription
pressedboolean—A category chip that is on: filled ink. Sets aria-pressed.
menubooleanfalseThe pill opens a menu of values: shows a chevron and sets aria-expanded instead of aria-pressed.
openbooleanfalseWith menu: the menu is open, the chevron turns and the border inks.
children*ReactNode—The category or facet: Runway, Campaign, Season.
...propsButtonHTMLAttributes—onClick and the rest.

Guidance

Do

  • Use chips where the rail doesn't fit: over a full-bleed feed, or on a phone.
  • Keep one chip on at a time; Latest shows everything.

Don't

  • Mix pills with square buttons in one row.
  • Use a pill for an action. Pills only filter.

Where it's used