Badge

A short status word in a 1px box: <span class="pd-badge">.

Consumer provides: one or two words of status.

• The word carries the meaning. There are no coloured badges; a red “Late” would fail for anyone who cannot tell red.
• data-tone="strong" inverts it (canvas on canvas-text) for the one status per screen that most needs attention.
• Keep badge text uppercase and short. For a count, include the noun (“3 low”, not “3”).

React

import { Badge } from '@imsus/normal-ui-react';

<Badge>Paid</Badge> <Badge tone="strong">3 low</Badge>