Badges

A small, non-interactive label for a status or count, such as Active, Beta or 3. Its colour matches its meaning.

Invoices4Auto-pay

Orbit LabsOct 18$1,240.00Paid
NorthwindOct 16$860.00Pending
HalcyonOct 12$2,100.00Failed
LumenOct 9$420.00Draft

import { Badge } from '@orvain/react';
 
<Badge intent="success" appearance="tint" label="Active" />
<Badge intent="error" appearance="fill" size="sm" pill label="Failed" />
<Badge intent="brand" appearance="outlineColored" type="withDot" label="New" />
<Badge intent="neutral" type="numberOnly" label="12" />

Add a black fill Orvain Badge, labelled “Badge”, square corners.

Orvain MCPIncluded with the library

When to use#

To mark the status of a row, card or plan: Paid, Pending, Failed.
For counts on tabs and navigation items, such as unread messages or open issues.

When not to use

Use a Tag for a value the person can remove or select.
Use an Alert for a message that needs to be read.

Anatomy#

1Container

26px tall, 8px sides (12 as a pill), 4px radius or fully round.

2Label

Satoshi Medium 14 on a 12px line, +2% tracking.

3Dot or icon

Optional 14px slot before or after the label: a dot, a ringed dot, or the seal-check glyph.

States#

Intent

Black, Neutral, Brand, Success, Warning, Error, Disabled.

Appearance

Fill, Tint, Tint + Outline, Lighter, Lighter + Outline, Outline + Colored Contents, Outline + Colored Icon.

Type

Label only, with dot, with ringed dot, left or right icon, number only, icon only, or empty.

Pill

Square corners or fully round.

Source#

Preview – final code pending

The Badges is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

tables cards metrics