Badge

SecondaryCopy Anchor Link

The default. Use it for a neutral label or a count.

import { Badge } from "@cadence-clinical/ui";

<Badge>Draft</Badge>;

OutlineCopy Anchor Link

Use an outline badge for a label with less weight.

<Badge variant="outline">Archived</Badge>

PrimaryCopy Anchor Link

Use a primary badge for a label that needs to stand out and is not a status.

<Badge variant="primary">New</Badge>

StatusesCopy Anchor Link

Use a status variant for a status the item has been given. The text says what the status is, so the badge does not rely on colour.

<Badge variant="critical">Cancelled</Badge>
<Badge variant="warning">Overdue</Badge>
<Badge variant="success">Final</Badge>
<Badge variant="info">Awaiting review</Badge>

A countCopy Anchor Link

Say what the count counts, unless it is clear from where the badge sits.

<Badge>3 new</Badge>

As a linkCopy Anchor Link

Pass a link to render to make the badge a link. Write text that makes sense on its own.

<Badge variant="outline" render={<a href="/results" />}>
  3 new results
</Badge>

Long contentCopy Anchor Link

A badge that holds clinical text wraps. It is never clipped or cut short.

<Badge variant="warning">Allergy: amoxicillin and clavulanic acid</Badge>