Badge
Badge displays a compact status or count on a parent element.
Source
LLM docs
Package
Examples
6
Properties
45
Playground
Basics
Wrap any label in a Badge to render a compact tag — the default
filled variant and primary color apply automatically.Loading demo…
import { Badge, Row } from '@plocks/ui'
export function Demo() {
return (
<Row gap={8} wrap="wrap">
<Badge>New</Badge>
<Badge>Beta</Badge>
<Badge>v1.0</Badge>
</Row>
)
}Semantic colors
Set
c to tokens such as primary, success, warning, error, or gray to align Badges with semantic meaning instead of hard-coded hex values.Loading demo…
import { Badge, Row } from '@plocks/ui'
export function Demo() {
return (
<Row gap={8} wrap="wrap">
<Badge c="primary">Primary</Badge>
<Badge c="success">Success</Badge>
<Badge c="warning">Warning</Badge>
<Badge c="error">Error</Badge>
<Badge c="gray">Gray</Badge>
</Row>
)
}Size scale
Adjust the
size prop (xs through 3xl, or a number) to match the density of the surrounding UI.Loading demo…
import { Badge, Block, Row, Text } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
export function Demo() {
return (
<Row align="center" gap="lg" wrap="wrap">
{SIZES.map((size) => (
<Block key={size} align="center">
<Badge size={size}>Badge</Badge>
<Text variant="small">{size}</Text>
</Block>
))}
</Row>
);
}Variant styles
Pick a
variant like filled, outline, light, subtle, or gradient when you need to shift emphasis without changing the Badge content.Loading demo…
import { Badge, Row } from '@plocks/ui'
export function Demo() {
return (
<Row gap={8} wrap="wrap">
<Badge variant="filled">Filled</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="light">Light</Badge>
<Badge variant="subtle">Subtle</Badge>
<Badge variant="gradient">Gradient</Badge>
</Row>
)
}Shadow depth
Use the
shadow prop (none through xl) to raise a Badge when it needs extra emphasis over surrounding UI.Loading demo…
import { Badge, Row } from '@plocks/ui'
export function Demo() {
return (
<Row gap={8} wrap="wrap">
<Badge shadow="none">No Shadow</Badge>
<Badge shadow="xs">XS Shadow</Badge>
<Badge shadow="sm">SM Shadow</Badge>
<Badge shadow="md">MD Shadow</Badge>
<Badge shadow="lg">LG Shadow</Badge>
<Badge shadow="xl">XL Shadow</Badge>
</Row>
)
}Prop aliases
v is shorthand for variant, so you can write more compact JSX without losing any functionality.Loading demo…
import { Badge, Block, Row } from '@plocks/ui'
const badges = [
{ label: 'Primary Filled', variant: 'filled', color: 'primary' },
{ label: 'Secondary Outline', variant: 'outline', color: 'secondary' },
{ label: 'Success Light', variant: 'light', color: 'success' },
{ label: 'Warning Subtle', variant: 'subtle', color: 'warning' },
] as const
export function Demo() {
return (
<Block>
<Row gap="sm" wrap="wrap">
{badges.map((badge) => (
<Badge key={`full-${badge.label}`} variant={badge.variant} c={badge.color}>
{badge.label}
</Badge>
))}
</Row>
<Row gap="sm" wrap="wrap">
{badges.map((badge) => (
<Badge key={`alias-${badge.label}`} v={badge.variant} c={badge.color}>
{badge.label}
</Badge>
))}
</Row>
</Block>
)
}React Native design for iOS, Android, and Web.
Quick Links
Resources