All components
Badge
Label state and metadata with palette-aware solid, subtle, surface, and outline styles.
Badge
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> </> );}Variants
Badgesolid
Badgesubtle
Badgesurface
Badgeoutline
Badgeplain
Sizes
Badgexs
Badgesm
Badgemd
Badgelg
Install
1npx stylexblocks add badgeSource
components/ui/ark-ui/badge.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/ark-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { colorPalette } from '@stylexblocks/ui/color-palette.stylex.ts'import { fontWeights } from '@stylexblocks/ui/tokens/font-weights.stylex.ts'import { radii } from '@stylexblocks/ui/tokens/radii.stylex.ts'import { sizes } from '@stylexblocks/ui/tokens/sizes.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'import { textStyles } from '@stylexblocks/ui/text-styles.ts'
const badgeStyles = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', borderRadius: radii.full, gap: spacing._1, fontWeight: fontWeights.medium, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap', userSelect: 'none', },})
const badgeVariants = stylex.create({ solid: { backgroundColor: colorPalette.solid, color: colorPalette.contrast, }, subtle: { backgroundColor: colorPalette.subtle, color: colorPalette.fg, boxShadow: 'inset 0 0 0px 1px var(--shadow-color)', '--shadow-color': colorPalette.border, }, outline: { color: colorPalette.fg, boxShadow: 'inset 0 0 0px 1px var(--shadow-color)', '--shadow-color': colorPalette.border, }, surface: { backgroundColor: colorPalette.muted, color: colorPalette.fg, boxShadow: 'inset 0 0 0px 1px var(--shadow-color)', '--shadow-color': colorPalette.border, }, plain: { color: colorPalette.fg, },})
const badgeSizes = stylex.create({ xs: { paddingInline: spacing._1, minHeight: sizes._4, }, sm: { paddingInline: spacing._1_5, minHeight: sizes._5, }, md: { paddingInline: spacing._2, minHeight: sizes._6, }, lg: { paddingInline: spacing._2_5, minHeight: sizes._7, },})
const badgeTextStyles = { xs: textStyles._2xs, sm: textStyles.xs, md: textStyles.sm, lg: textStyles.sm,} as const
export type BadgeVariant = keyof typeof badgeVariants
export type BadgeSize = keyof typeof badgeSizes
/** * Badge — recipe and component colocated in one file. Variant/size props * resolve mechanically from the axis maps; `extend` carries the per-size * text styles. Composition via `asChild`. */const badgeRecipe = defineRecipe({ styles: badgeStyles, axes: { variant: badgeVariants, size: badgeSizes }, defaultVariants: { variant: "surface", size: "md" }, extend: (v) => [badgeTextStyles[v.size]],});
export const Badge = createComponent("span", badgeRecipe, "Badge");
export type BadgeProps = React.ComponentProps<typeof Badge>;