Badge

Displays a small label for status, categories, or metadata. Available in solid, soft, and outline variants across eight color options.

NeutralYellowRedGreenBluePurplePinkOrange

1<Badge color="neutral">Neutral</Badge>
2<Badge color="brand">Yellow</Badge>
3<Badge color="danger">Red</Badge>
4<Badge color="success">Green</Badge>
5<Badge color="blue">Blue</Badge>
6<Badge color="purple">Purple</Badge>
7<Badge color="pink">Pink</Badge>
8<Badge color="orange">Orange</Badge>
9

Usage

1import { Badge } from "atlas";
2
3<Badge color="brand" variant="soft">
4  Featured
5</Badge>
6

Examples

Default

The default Badge renders with color="neutral" and variant="soft".

Badge

1<Badge>Badge</Badge>
2

Neutral

Use color="neutral" for generic labels like draft status or metadata tags.

Draft

1<Badge color="neutral">Draft</Badge>
2

Danger

Use color="danger" for error states or critical status indicators.

Error

1<Badge color="danger">Error</Badge>
2

Success

Use color="success" for positive states like active, verified, or complete.

Active

1<Badge color="success">Active</Badge>
2

Solid

Use variant="solid" for high-emphasis badges that need to stand out, like error counts or critical alerts.

Error

1<Badge variant="solid" color="danger">Error</Badge>
2

Outline

Use variant="outline" for a neutral, low-emphasis treatment with a surface background and border. Ignores the color prop.

Draftv2.4.1

1<Badge variant="outline">Draft</Badge>
2<Badge variant="outline">v2.4.1</Badge>
3

With icon

Pass a component to the icon prop to render it before the label.

Verified

1<Badge icon={<IconCheckmark1 />} color="success">Verified</Badge>
2

Set loading to show a spinner in place of the icon.

Deleting

1<Badge loading color="danger">Deleting</Badge>
2

Loading end

Use loadingPosition="end" to place the spinner after the label.

Generating

1<Badge loading loadingPosition="end" color="neutral">Generating</Badge>
2

API Reference

Prop	Type	Default
color	"brand" \| "neutral" \| "danger" \| "success" \| "blue" \| "purple" \| "pink" \| "orange"	"neutral"
variant	"solid" \| "soft" \| "outline"	"soft"
icon	ReactNode	-
loading	boolean	false
loadingPosition	"start" \| "end"	"start"