Chips & filters

Chip is a small rounded label for tags and categorization (removable when you pass onRemove). FilterChip is the toggleable pill used for list/inbox filters.

Live

Unread12Errors3Assigned to me8Test orders

BeveragesWest DCRushPriority

Top row toggles FilterChips (with counts); bottom row is removable Chips plus one accent chip.

Chip

import Chip from '@repo/ui/Chip';

<Chip>Beverages</Chip>
<Chip intent="accent" leadingDot>Priority</Chip>
<Chip onRemove={() => removeTag(id)} removeLabel="Remove Beverages">Beverages</Chip>

Prop	Type	Notes
intent	neutral | accent	accent for one brand moment only
onRemove	() => void	Renders an accessible × button (this is the “tag” use)
removeLabel	string	aria-label for the × (default “Remove”)
leadingDot	boolean	Small status dot

There’s no separate Tag component — a removable Chip is the tag.

FilterChip

import FilterChip from '@repo/ui/FilterChip';

<FilterChip selected={active} count={12} onClick={toggle}>Unread</FilterChip>

Prop	Type	Notes
selected	boolean	Sets aria-pressed; filled (ink) when on
count	number	Optional trailing count
onClick	() => void	Toggle handler
disabled	boolean

Do / don’t

• Do use FilterChip for multi-select list filters; selected reads as filled.
• Do give removable chips a descriptive removeLabel.
• Don’t use accent chips for more than one thing per view — orange stays ~2%.

Accessibility

• FilterChip is a real button with aria-pressed; Chip’s × is a labelled button. Keyboard-operable, focus-visible ring on --om-orange-press. Verified with jest-axe.