Badge
A badge is a visual indicator for numeric values such as tallies and scores.
#Default
Use a badge to show a count next to the thing it counts.
8
import { Badge } from '@wolf-rayet/react';
<Badge>8</Badge>#Appearance
Use appearance to show whether the number is good or bad news.
121212+100-505
import { Badge } from '@wolf-rayet/react';
<Badge>12</Badge>
<Badge appearance="primary">12</Badge>
<Badge appearance="primary-inverted">12</Badge>
<Badge appearance="added">+100</Badge>
<Badge appearance="removed">-50</Badge>
<Badge appearance="important">5</Badge>#Maximum
Use max to cap a large count so the badge keeps its width.
120042
import { Badge } from '@wolf-rayet/react';
<Badge max={99}>1200</Badge>
<Badge appearance="primary" max={9}>42</Badge>