Badges

neutralaccentinfosuccesswarningdanger

<Badge>neutral</Badge>
<Badge tone="accent">accent</Badge>
<Badge tone="info">info</Badge>
<Badge tone="success">success</Badge>
<Badge tone="warning">warning</Badge>
<Badge tone="danger">danger</Badge>

Categories#Link to this section

Six categorical tones tell groups apart, such as the categories in a vocabulary. They stay distinct with protanopia, deuteranopia and tritanopia. dataTone(index) picks one, and repeats after six.

peoplesettingtime-of-dayweatherroomstyle

{categories.map((name, index) => <Badge tone={dataTone(index)}>{name}</Badge>)}

The same colours are Tailwind utilities, such as bg-data-2 for a bar or border-data-4 for an edge. Always pair them with text: colour alone doesn’t say which group is which.