Badge

A short label for a state or a category: “Open”, “Paid”, “Verified client”.

import { Badge } from '@zitdevs/ui';

Examples

DraftVerified clientFeaturedOpenDue soonOverdueNew

<Badge label="Draft" />
<Badge label="Verified client" tone="primary" icon="check" />
<Badge label="Open" tone="success" dot />
<Badge label="Overdue" tone="danger" icon="circle-alert" />
<Badge label="New" tone="solid" />

Props

Prop	Type	Default	Notes
label	string	required	The words, which carry the meaning.
tone	'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'solid'	'neutral'	See below.
icon	IconName	—	Decorative, before the label, 13px.
dot	boolean	false	A 6px dot before the label, in the tone’s colour.
ref	Ref<HTMLSpanElement>	—	The <span>.
className	string	—	Placement.
anything else	<span> attributes	—	On the root.

tone	Means
neutral	Says nothing about the state.
primary, accent	Sets a label apart.
success, warning, danger	Reports a state, in the status roles.
solid	The strongest, on the primary fill.

Exported types: BadgeProps, BadgeTone.

Accessibility

• It is text, not a control: nothing to focus, nothing to press.
• The words carry the meaning. The dot and the icon are decoration, hidden from assistive technology, and a status is never told by its colour alone.
• Every tone’s words reach 4.5:1 on its field. The status colours themselves reach only 3 to 4:1 there, so success and warning set their words in ink and danger in danger-strong; the status colour stays in the dot and the icon.

Without JavaScript

It is text; it needs none.

Theming

surface-active and body (neutral), primary-soft and primary-active (primary), accent-soft and accent-strong (accent), success-soft, success, warning-soft, warning, danger-soft, danger, danger-strong and ink (the statuses), primary and on-primary (solid).