All components
Badge
Label state and metadata with palette-aware solid, subtle, surface, and outline styles.
Badge
Variants
Badgesolid
Badgesubtle
Badgesurface
Badgeoutline
Badgeplain
Sizes
Badgexs
Badgesm
Badgemd
Badgelg
Install
zsh — badge
1bunx stylexblocks add badgeUsage — Ark UI
badge.tsx
123456789101112131415161718import { Badge } from "#components/ui/ark-ui/badge.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( <> {/* variant + size props resolve through the StyleX recipe */} <Badge variant="surface" size="md" palette={indigoPalette}> New </Badge>
{/* composition: asChild forwards everything onto your element */} <Badge asChild variant="solid" size="sm"> <a href="/changelog">12 new blocks</a> </Badge> </> );}