Badge

A compact label for statuses, categories, and counts. Six color variants map directly to the AvilaDS primitive palette, with two sizes for inline and standalone contexts.

Preview

Variants — md

PrimaryMarigoldCobaltTealDarkOutline

Variants — sm

PrimaryMarigoldCobaltTealDarkOutline

Typical usage

LiveNewBetav2.0DeprecatedDraft

Usage

import { Badge } from '@/components/Badge';

// Variants
<Badge variant="primary">Primary</Badge>
<Badge variant="marigold">Marigold</Badge>
<Badge variant="cobalt">Cobalt</Badge>
<Badge variant="teal">Teal</Badge>
<Badge variant="dark">Dark</Badge>
<Badge variant="outline">Outline</Badge>

// Sizes
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>

// Typical usage
<Badge variant="teal" size="sm">Live</Badge>
<Badge variant="primary" size="md">New</Badge>
<Badge variant="marigold" size="sm">Beta</Badge>

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'marigold' \| 'cobalt' \| 'teal' \| 'dark' \| 'outline'`	`'primary'`	Color treatment. primary = hot-pink. outline = transparent with an ink border.
`size`	`'sm' \| 'md'`	`'md'`	sm = 20px height / 10px font. md = 26px height / 12px font.
`children`	`React.ReactNode`	`—`	Badge label text. Required.
`className`	`string`	`—`	Additional CSS class names merged into the element.