Components · shadcn badge, toggle

Tags, status and chips

Three kinds, each distinct from the others and from line badges: a neutral tag for categories, a status badge in words, and a capsule chip you press to filter.

Status badges

Status is always shown in words, from one shared table in @ppitsz/ui/lib/network, so every site says “Fully booked” the same way. Tinted tones carry a small leading dot.

Preview

UpcomingRegistration openFully bookedEndedAccepted · HumasNot selectedNew

Show code

<StatusBadge domain="event" value="registration_open" />
<StatusBadge domain="oprec" value="accepted" suffix="Humas" />

Domain	Value	Label	Badge
event	`upcoming`	Upcoming	Upcoming
event	`registration_open`	Registration open	Registration open
event	`full`	Fully booked	Fully booked
event	`past`	Ended	Ended
form	`open`	Open	Open
form	`closed`	Closed	Closed
form	`submitted`	Submitted	Submitted
form	`attended`	Attended	Attended
form	`draft`	Draft	Draft
form	`done`	Ended	Ended
form	`upcoming`	Opening soon	Opening soon
form	`full`	Fully booked	Fully booked
form	`ended`	Registration closed	Registration closed
form	`cancelled`	Canceled	Canceled
oprec	`pending`	Under review	Under review
oprec	`scheduled`	Interview scheduled	Interview scheduled
oprec	`accepted`	Accepted	Accepted
oprec	`rejected`	Not selected	Not selected
content	`new`	New	New
campaign	`draft`	Draft	Draft
campaign	`open`	Open	Open
campaign	`closed`	Ended	Ended
campaign	`upcoming`	Opening soon	Opening soon
campaign	`online`	Ordering online	Ordering online
campaign	`booth`	At the booth	At the booth
campaign	`ended`	Orders closed	Orders closed
order	`pending_payment`	Not paid	Not paid
order	`awaiting_verification`	Needs checking	Needs checking
order	`paid`	Paid	Paid
order	`picked_up`	Picked up	Picked up
order	`sending`	On its way	On its way
order	`delivered`	Delivered	Delivered
order	`expired`	Expired	Expired
order	`cancelled`	Canceled	Canceled

Filter chips

A capsule <button aria-pressed> in a role="group" with a label. Pressed fills with ink and gains a leading Check. Chips filter instantly, so there is no loading state; announce the result in a role="status" region.

Preview

Showing: Sports.

Show code

<FilterChipGroup aria-label="Filter event categories">
  <FilterChip pressed={on} onPressedChange={setOn}>Sports</FilterChip>
</FilterChipGroup>

Filtering by divisionLine badges are never buttons. To filter by division, put the badge inside a chip: the pressed chip fills with ink like any other, and the badge keeps its line color.

Preview

Show code

<FilterChip pressed={on} onPressedChange={setOn}><LineBadge code="humas" /></FilterChip>

Rules

Tags and badges are static. Chips: hover → surface-strong, focus-visible → global outline, pressed → ink fill, disabled → subtle text.
When a status changes live (after a booking), announce it in a role="status" region.