Badge

A small label for statuses, counts, and categories.

import { ... } from '@corndev/ui'

DefaultPrimarySuccessWarningDangerInfo

ActiveOfflinePending

SmallMediumLarge

HTML

No JavaScript required — these classes are the whole component.

<span class="corn-badge" data-variant="primary" data-emphasis="soft" data-size="md">New</span>
<span class="corn-badge" data-variant="danger" data-emphasis="solid" data-size="md">Breaking</span>

Classes

Class
`.corn-badge`

Attributes

Attribute	Values
`data-size`	`sm\|md\|lg`
`data-variant`	`default\|primary\|success\|warning\|danger\|info`
`data-emphasis`	`solid\|outline\|quiet\|soft`
`data-dot`	`present or absent`

Vanilla JS

Optional. createBadge only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createBadge } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createBadge(el, { /* options */ });

Options

Option	Type	Default	Description
`variant`	`'default'\|'primary'\|'success'\|'danger'\|'warning'\|'info'`	`'default'`	Which colour.
`emphasis`	`'solid'\|'soft'\|'outline'\|'quiet'`	`'soft'`	How much of that colour is filled in, independently of which colour it is — the same axis and the same names as Button. `soft` is a tint with the colour as the text, `outline` a border and no fill, `quiet` neither. It defaults to `soft` rather than Button’s `solid` because a badge labels a thing rather than inviting a click.
`size`	`'sm'\|'md'\|'lg'`	`'md'`
`dot`	`boolean`	`false`	Render a leading status dot.

React

Badge — from @corndev/ui-react.

The props are the same as the options above, plus className.

Default

<Badge>Default</Badge>

Variants

DefaultPrimarySuccessWarningDangerInfo

<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="info">Info</Badge>

Emphasis

variant is the colour, emphasis is how much of it is filled in — the same axis and the same four names as Button.

SolidSoftOutlineQuiet

<Badge variant="danger" emphasis="solid">Solid</Badge>
<Badge variant="danger" emphasis="soft">Soft</Badge>
<Badge variant="danger" emphasis="outline">Outline</Badge>
<Badge variant="danger" emphasis="quiet">Quiet</Badge>

The default is soft, where Button’s is solid. A badge labels a thing rather than inviting a click, and a row of solid blocks in a table reads as a row of buttons. Four of the six variants already rendered as tints before this axis existed, so only variant="primary" changed appearance — emphasis="solid" brings the old look back:

- <Badge variant="primary">New</Badge>
+ <Badge variant="primary" emphasis="solid">New</Badge>

A filled red badge and a tinted one say different things — that there are breaking changes, against a count of none — which is the distinction this axis exists to let you draw.

Without React

<span class="corn-badge" data-variant="danger" data-emphasis="solid" data-size="md">Breaking</span>

Sizes

SmallMediumLarge

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

With dot indicator

ActiveOfflinePending

<Badge variant="success" dot>Active</Badge>
<Badge variant="danger" dot>Offline</Badge>