Data display

Chip

Filtering, multi-selection and status in one small element, readable at 10px and 12px.

Examples

Filter chips (toggle buttons, aria-pressed)

Removable · tag radius · small

Approved TagSmall · 24

Rendered states (visual reference; the live example above is the accessible one)
	Default	Hover	Focus visible	Pressed	Disabled
Unselected
Selected

Chip anatomy
#	Part	Description	Presence
1	Container	Pill or 6px tag, 24 / 32px	Required
2	Leading icon	14px	Optional
3	Label	Manrope 10 to 12px	Required
4	Remove button	Separate button with its own name	Optional

Keyboard
Key	Result
`Tab`	Each chip is a stop
`Space` `Enter`	Toggles a filter chip
`Backspace` `Delete`	Removes a focused removable chip

Pointer and touch
Trigger	Response
Click	Toggles selection
Hover	Border strengthens

role · button (toggle) or button

2.5.8Target Size (Minimum)4.1.2Name, Role, Value4.1.3Status Messages

Requirements
Requirement	How Rig meets it
Filter chips	<button aria-pressed>; a group needs a label
Removable	A real button inside: aria-label="Remove Approved"
Size	24px height meets the 24px minimum; use 32px on touch
Announce	Say how many results changed in a live region

Do and don’t
Do	Don’t
Use for filters and tags the person can change	Do not use as a navigation menu
	Do not truncate chip labels without a tooltip