Badge

A short status or category marker. Unlike a field, a badge exists to be noticed, so it keeps the full colour system and the tint escape hatch.

src/components/ui/badge.tsx

About

From the component's own source, where it was written.

A short status or category marker.

Unlike a field, a badge exists to be noticed, so it keeps the full colour system — the same --ui-* sets and tint escape hatch a Button uses.

secondary is the default because it is the right answer nearly every time: tinted enough to read as a badge, quiet enough to sit in a table row or a heading without shouting. Reach for default only when a badge has to be the loudest thing on screen, and for outline only on an already-tinted surface where a second fill would compete. Meaning belongs in color, not variant.

Install

npx astralyx-ui add badge

Usage

import { Badge } from '@/components/ui/badge'

<Badge color="green">Passing</Badge>

Composer

Change the props and the source below follows.

Passing

Props

variant

color

size

shape

iconPosition

children

tint

tsx

<Badge icon={<Check />}>Passing</Badge>

Examples

Variants

tsx

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="ghost">Ghost</Badge>

Colour sets

tsx

<Badge color="green">Passing</Badge>
<Badge color="destructive" variant="default">Failed</Badge>

Sizes and shapes

tsx

<Badge size="sm">sm</Badge>
<Badge size="lg" shape="rounded">lg rounded</Badge>

With an icon

tsx

<Badge icon={<Check />} color="green">Verified</Badge>
<Badge icon={<X />} iconPosition="end" color="destructive">Failed</Badge>
<Badge icon={<GitBranch />} variant="outline">main</Badge>

Custom tint

tsx

<Badge tint="#7c3aed">Custom</Badge>
<Badge tint="#0f766e" variant="default">Custom solid</Badge>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Badge`

A short status or category marker.

Extends Omit<ComponentProps<'span'>, 'color'>.

Prop	Type	Default	Description
color	'neutral' \| 'blue' \| 'violet' \| 'cyan' \| 'green' \| 'amber' \| 'rose' \| 'destructive'	'neutral'	Named colour set, shared with Button.
variant	'default' \| 'secondary' \| 'outline' \| 'ghost'	'secondary'	Solid, tinted, outline or text-only. All read the active colour set. Choosing one: secondary for almost everything — it is the tinted default and stays legible on any surface; default (solid) only where a badge must be the loudest thing in view; outline when the badge sits on an already-tinted fill and another tint would compete; ghost for a count that should recede.
size	'sm' \| 'default' \| 'lg'	'default'	Height, padding and text size.
shape	'rounded' \| 'pill'	'pill'	A true pill, or the squircle used elsewhere in the kit.
tint	string	—	Any CSS colour, used instead of a named set.
icon	ReactNode	—	Rendered inside the badge. Sized automatically from the badge size — 12px at sm and default, 14px at lg.
iconPosition	'start' \| 'end'	'start'	Which side the icon sits on. Ignored with asChild, where the caller owns the children.
asChild	boolean	false	Render the child element instead of a <span> — for a badge that is also a link.

Functions

Function	Signature	Description
badgeVariants	(props?: { variant?: 'default' \| 'secondary' \| 'outline' \| 'ghost'; color?: 'neutral' \| 'blue' \| 'violet' \| 'cyan' \| 'green' \| 'amber' \| 'rose' \| 'destructive'; size?: 'sm' \| 'default' \| 'lg'; shape?: 'rounded' \| 'pill' }) => string	A short status or category marker.

Types

Type	Definition	Description
`ColorSet`	keyof typeof colorSet	—