Chips
A chip is a small pill badge that says where something stands: voted or not, nudged, closed, decided. You can’t tap it. Every example here is the app’s real component.
Status chip
Section titled “Status chip”Four status colours. The fill, border and text always come from the same one, and never mix (see Colour).
| Colour | Means | Real examples |
|---|---|---|
| Error | Something’s wrong, or you still need to act | Not voted, No longer available, Closed |
| Warning | Needs attention, not broken | Nudged |
| Success | Done, or the good outcome | Voted, Checked, Winner |
| Info | Neutral progress | 2 of 5 checked, Decided |
Option chips
Section titled “Option chips”Not a status. A separate set of colours for labelling things that are equally valid, so none of them reads as “wrong” the way Error would. The shared chip has Option 1 and 2. Option 3 is only built by hand, for How’s third saved route.
Option 1: a stay's price
Option 2: a stay's rating
Poll status chip
Section titled “Poll status chip”A sibling of the status chip, with a small icon badge over its left edge showing what it’s about: the voting deadline, Where, When or Stay. The badge stays dark green whatever the chip’s colour. Only its ring, and the pill around it, follow the status colour.
Deadline, time left: Info
5 days or fewer: Error
No votes yet: Error
Some voted: Warning
Everyone voted: Success
Decided fact: Neutral
The colour follows real rules, not a free choice:
| Chip | Rule |
|---|---|
| Voting deadline | Info while there’s time. Error, with a “!”, at 5 days or fewer, or once it’s overdue |
| Where, When, Stay | Error at no votes. Warning while some of the group have voted (“3 votes”). Success once everyone has (“All voted”) |
| Decided | Neutral green on the home cards once a jaunt is happening or done: the city, the dates, the stay |
Vote status and Nudged
Section titled “Vote status and Nudged”Vote status: not voted
Vote status: voted
Nudged
- Vote status shows where you stand on a poll: “Not voted” (Error) or “Voted” (Success). Once the poll is decided it shows nothing, because the hero already says “Decided”.
- Nudged sits under a task or checklist row once an admin has nudged you about it. It shows for an hour, then goes.
Alert chip
Section titled “Alert chip”The app’s error or warning message, shown straight after the button or action that caused it. Unlike other chips it wraps onto more lines, with 15px corners instead of fully round ends. It fades in and out over 300ms instead of popping.
Anatomy
Section titled “Anatomy”| Part | Value |
|---|---|
| Shape | Fully rounded. The alert chip uses 15px corners, because it wraps |
| Padding | 8px either side, 3px top and bottom |
| Text | Body 2 (14px, semibold), one line |
| Colour | Fill, border and text all from one colour |
| Shadow | shadow-elevated |
| Poll status chip | 26px tall, with a 26px icon badge over its left edge |
Do and don’t
Section titled “Do and don’t”The alert goes under the button
Show an alert chip straight after the button that caused it, not above it.
Chips are short
A chip is a word or two. A longer message is an alert chip, which wraps.
Accessibility
Section titled “Accessibility”- Chips always say what they mean in words (“Not voted”), never by colour alone.
- They’re plain text to screen readers, read in place with the row they belong to.
- An alert chip is read out the moment it appears.
Source
Section titled “Source”src/web/components/StatusChip.tsxsrc/web/components/PollStatusChip.tsxsrc/web/components/VoteStatusChip.tsxsrc/web/components/NudgedChip.tsxsrc/web/components/AlertChip.tsx