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 — Base UI
badge.tsx
12345678910111213141516171819import { Badge } from "#components/ui/base-ui/badge.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( <> {/* variant + size props resolve through the StyleX recipe and are exposed as data-variant / data-size attributes */} <Badge variant="surface" size="md" palette={indigoPalette}> New </Badge>
{/* composition: the render prop replaces the underlying element */} <Badge variant="solid" size="sm" render={<a href="/changelog" />}> 12 new blocks </Badge> </> );}