Badge

Live demo

PaidOverdueDraftNew+8%

How to use it

One or two words of status, or a delta like "+8%", beside the thing it describes.

Provide children and tone: positive, negative, neutral or accent. dot adds a leading status dot.
Status is always a word, never color alone ("Paid", "Overdue", "Draft").
Numbers inside badges use tabular figures automatically.

Don't: more than two badges on one row, sentences inside badges, accent badges for status.

In every theme

Follows the mode picked in the header.

Graphite

PaidOverdueDraftNew

Glass

PaidOverdueDraftNew

Paper

PaidOverdueDraftNew

Mineral

PaidOverdueDraftNew

Enamel

PaidOverdueDraftNew

Ember

PaidOverdueDraftNew

Code

React

import { Badge } from 'enma/react';

<Badge tone="positive" dot>Paid</Badge>
<Badge tone="negative">Overdue</Badge>
<Badge>Draft</Badge>
<Badge tone="accent">New</Badge>

Plain HTML

<span class="e-badge e-badge--positive"><span class="e-badge__dot" aria-hidden="true"></span>Paid</span>
<span class="e-badge e-badge--negative">Overdue</span>

Props

`BadgeProps`

Also accepts every attribute of React.HTMLAttributes<HTMLSpanElement>.

Props of BadgeProps
Prop	Type	Default
`tone`	Tone	'neutral'
`dot`	boolean
`children`	React.ReactNode