Loading...
Installation
Usage
import { Badge } from "@/components/ui/badge"
export default function App() {
return <Badge variant="success"
Getting Started
A compact status indicator with color variants, optional dot, and configurable styling.
import { Badge } from "@/components/ui/badge"
export default function App() {
return <Badge variant="success"
The Badge component supports two types of theming:
Dot-only variants (color applies only to dot):
default - Green dot with grey textgrey - Grey dot with grey textFull-themed variants (color applies to dot, text, background, and border):
error - Red themewarning - Orange themesuccess - Green themeblue - Blue themeEach size has a corresponding border-radius value:
s - 20px height, 5px radiusr - 22px height, 6px radius (default)m - 24px height, 7px radiusThe radius prop controls both border-radius and background/border application:
radius="true" (default):
radius="false":
// Rounded with background
<Badge variant="success" radius={true}>Success</Badge>
// Minimal rounding without background
<Badge variant="success" radius={false}>Success</Badge>Use showDot={false} to hide the dot indicator:
<Badge variant="error" showDot={false}>Error</Badge>The Badge component uses a sophisticated theming system that distinguishes between two types of variants:
default and grey variants.error, warning, success, and blue variants.Heights (from --badge-height-{size}):
s: 20pxr: 22pxm: 24pxBorder Radius (from --badge-radius-{size}):
s: 5pxr: 6pxm: 7pxSpacing:
--gap-1: 2px (gap between dot and text)--gap-2: 4px (horizontal padding)Typography:
--font-size-12: 12px (for sizes s and r)--font-size-14: 14px (for size m)--font-family-geist-sans: Geist font family--font-weight-regular-default: 400| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | default | grey | error | warning | success | blue | default | No | The visual style variant. Dot-only variants (default, grey) apply minimal styling. Full-themed variants (error, warning, success, blue) apply color to dot, text, background, and border. |
size | s | r | m | r | No | The size of the badge. s=20px height with 5px radius, r=22px height with 6px radius, m=24px height with 7px radius. |
radius | true | false | true | No | Controls border-radius and background application. true applies size-specific radius (5px/6px/7px) with backgrounds/borders based on variant. false applies minimal rounding (2px) without backgrounds/borders. |
showDot | boolean | true | No | Whether to show the dot indicator. Dot color is determined by the variant. |
import { Badge } from '@/registry/basic-ui/badge';
export function BadgeDemo() {
return (
<div className="flex flex-col gap-(--gap-8)">
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
Size
</h3>
<div className="flex flex-wrap items-center gap-(--gap-4)">
<Badge size="s" variant="default">
s
</Badge>
<Badge size="r" variant="default">
r
</Badge>
<Badge size="m" variant="default">
m
</Badge>
<Badge size="s" variant="default" radius={false}>
s
</Badge>
<Badge size="r" variant="default" radius={false}>
r
</Badge>
<Badge size="m" variant="default" radius={false}>
m
</Badge>
</div>
</div>
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
All Variants (radius={`true`})
</h3>
<div className="flex flex-wrap gap-(--gap-4)">
<Badge variant="default">Default</Badge>
<Badge variant="grey">Grey</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="blue">Blue</Badge>
</div>
</div>
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
All Variants (radius={`false`})
</h3>
<div className="flex flex-wrap gap-(--gap-4)">
<Badge variant="default" radius={false}>
Default
</Badge>
<Badge variant="grey" radius={false}>
Grey
</Badge>
<Badge variant="error" radius={false}>
Error
</Badge>
<Badge variant="warning" radius={false}>
Warning
</Badge>
<Badge variant="success" radius={false}>
Success
</Badge>
<Badge variant="blue" radius={false}>
Blue
</Badge>
</div>
</div>
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
Without Dot Indicator
</h3>
<div className="flex flex-wrap gap-(--gap-4)">
<Badge variant="default" showDot={false}>
No Dot
</Badge>
<Badge variant="error" showDot={false}>
Error
</Badge>
<Badge variant="success" showDot={false}>
Success
</Badge>
</div>
</div>
</div>
);
}
import { Badge } from '@/registry/basic-ui/badge';
export function BadgeDemo() {
return (
<div className="flex flex-col gap-(--gap-8)">
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
Size
</h3>
<div className="flex flex-wrap items-center gap-(--gap-4)">
<Badge size="s" variant="default">
s
</Badge>
<Badge size="r" variant="default">
r
</Badge>
<Badge size="m" variant="default">
m
</Badge>
<Badge size="s" variant="default" radius={false}>
s
</Badge>
<Badge size="r" variant="default" radius={false}>
r
</Badge>
<Badge size="m" variant="default" radius={false}>
m
</Badge>
</div>
</div>
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
All Variants (radius={`true`})
</h3>
<div className="flex flex-wrap gap-(--gap-4)">
<Badge variant="default">Default</Badge>
<Badge variant="grey">Grey</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="blue">Blue</Badge>
</div>
</div>
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
All Variants (radius={`false`})
</h3>
<div className="flex flex-wrap gap-(--gap-4)">
<Badge variant="default" radius={false}>
Default
</Badge>
<Badge variant="grey" radius={false}>
Grey
</Badge>
<Badge variant="error" radius={false}>
Error
</Badge>
<Badge variant="warning" radius={false}>
Warning
</Badge>
<Badge variant="success" radius={false}>
Success
</Badge>
<Badge variant="blue" radius={false}>
Blue
</Badge>
</div>
</div>
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
Without Dot Indicator
</h3>
<div className="flex flex-wrap gap-(--gap-4)">
<Badge variant="default" showDot={false}>
No Dot
</Badge>
<Badge variant="error" showDot={false}>
Error
</Badge>
<Badge variant="success" showDot={false}>
Success
</Badge>
</div>
</div>
</div>
);
}
import { Badge } from '@/registry/basic-ui/badge';
export function BadgeSizesDemo() {
return (
<div className="flex flex-col gap-(--gap-8)">
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
Size: s (20px height, 5px radius)
</h3>
<div className="flex flex-wrap gap-(--gap-4)">
<Badge size="s" variant="default">
Default
</Badge>
<Badge size="s" variant="error">
Error
</Badge>
<Badge size="s" variant="success">
Success
</Badge>
<Badge size="s" variant="blue">
Blue
</Badge>
</div>
</div>
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
Size: r (22px height, 6px radius) - Default
</h3>
<div className="flex flex-wrap gap-(--gap-4)">
<Badge size="r" variant="default">
Default
</Badge>
<Badge size="r" variant="error">
Error
</Badge>
<Badge size="r" variant="success">
Success
</Badge>
<Badge size="r" variant="blue">
Blue
</Badge>
</div>
</div>
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
Size: m (24px height, 7px radius)
</h3>
<div className="flex flex-wrap gap-(--gap-4)">
<Badge size="m" variant="default">
Default
</Badge>
<Badge size="m" variant="error">
Error
</Badge>
<Badge size="m" variant="success">
Success
</Badge>
<Badge size="m" variant="blue">
Blue
</Badge>
</div>
</div>
<div className="flex flex-col gap-(--gap-4)">
<h3 className="text-sm font-medium text-grey-text-alpha-1-default">
All Sizes Comparison (success variant)
</h3>
<div className="flex items-center flex-wrap gap-(--gap-4)">
<Badge size="s" variant="success">
Small
</Badge>
<Badge size="r" variant="success">
Regular
</Badge>
<Badge size="m" variant="success">
Medium
</Badge>
</div>
</div>
</div>
);
}