Feedback

Badge

Small status descriptor. Use for tags, counts, and inline status.

Source
Preview
GitHub
01 Installation

Install

Pull Badge from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line
import { Badge } from "@brika/clay";
tsxGranular1 line
import { Badge } from "@brika/clay/components/badge";
02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxBadge.tsx6 lines
import { Badge } from '@brika/clay/components/badge';

/** Default filled badge, use for status labels, counts, and tags. */
export default function BadgeDefaultDemo() {
  return <Badge>New</Badge>;
}
03 Examples

Badge, every way

As Link

`asChild` renders badge styles on the child element, useful for version or tag links.

GitHub

Variants

All five variants, ordered by emphasis.

GitHub

With Icon

SVG children are automatically sized to 12 px, no extra className needed.

GitHub
04 Accessibility

Accessibility

  • Renders as a <span>, purely informational, carries no interactive role.
  • When used as a link with asChild, the accessible name comes from the badge text.
  • Numeric count badges in tab triggers should be accompanied by a visually hidden description.
05 Tokens 31 theme-overridable

Theme tokens

Every CSS variable Badge reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Badge without touching component code.

Badge tokens

31 tokens
ColorFill, border, and text colors.16
  • --badge-filled-containercolorvar(--primary)
    components.badge.filledContainer

    Background of the default (filled) badge variant.

  • --badge-filled-labelcolorvar(--primary-foreground)
    components.badge.filledLabel

    Label color of the default (filled) badge variant.

  • --badge-secondary-containercolorvar(--secondary)
    components.badge.secondaryContainer

    Background of the secondary badge variant.

  • --badge-secondary-labelcolorvar(--secondary-foreground)
    components.badge.secondaryLabel

    Label color of the secondary badge variant.

  • --badge-destructive-containercolorvar(--destructive)
    components.badge.destructiveContainer

    Background of the destructive badge variant.

  • --badge-destructive-labelcoloroklch(1 0 0)
    components.badge.destructiveLabel

    Label color of the destructive badge variant. Defaults to white so it stays legible regardless of `--destructive` hue.

  • --badge-outline-bordercolorvar(--border)
    components.badge.outlineBorder

    Border color of the outline badge variant.

  • --badge-outline-labelcolorvar(--foreground)
    components.badge.outlineLabel

    Label color of the outline badge variant.

  • --badge-ghost-hover-containercolorvar(--accent)
    components.badge.ghostHoverContainer

    Hover background of the outline / ghost badge variants when wrapped in an `<a>` (`[a&]:hover`).

  • --badge-ghost-hover-labelcolorvar(--accent-foreground)
    components.badge.ghostHoverLabel

    Hover label color of the outline / ghost badge variants when wrapped in an `<a>`.

  • --badge-link-colorcolorvar(--primary)
    components.badge.linkColor

    Foreground color of the link badge variant.

  • --badge-focus-bordercolorvar(--ring)
    components.badge.focusBorder

    Border color of the badge while focus-visible. Defaults to the `--ring` role so focus rings stay consistent with the rest of the system.

  • --badge-focus-ringcolorvar(--ring)
    components.badge.focusRing

    Outer focus halo of the badge, applied via `focus-visible:ring-badge-focus-ring/50`. Defaults to the `--ring` role at 50% so themes can recolor the badge focus halo without affecting other components.

  • --badge-invalid-bordercolorvar(--destructive)
    components.badge.invalidBorder

    Border color when the badge carries `aria-invalid`. Defaults to the destructive role so themes can retune the validation tint independently.

  • --badge-invalid-ringcolorvar(--destructive)
    components.badge.invalidRing

    Outer ring color when the badge carries `aria-invalid`, applied at 20% (40% in dark mode) via `aria-invalid:ring-badge-invalid-ring/20`.

  • --badge-destructive-focuscolorvar(--destructive)
    components.badge.destructiveFocus

    Focus-ring color of the destructive badge variant. Applied via `focus-visible:ring-badge-destructive-focus/20` (and `dark:.../40`) so themes can shift the destructive halo independently of the fill.

GeometrySizes, lengths, and corner radii.5
  • --badge-radiusradiusvar(--radius-pill)
    components.badge.radius

    Badge corner radius.

  • --badge-heightsize1.5rem
    components.badge.height

    Default badge height.

  • --badge-padding-xsizecalc(var(--spacing) * 2)
    components.badge.paddingX

    Inline padding inside the badge.

  • --badge-padding-ysize0.125rem
    components.badge.paddingY

    Block padding inside the badge.

  • --badge-gapsizecalc(var(--spacing) * 1)
    components.badge.gap

    Gap between adjacent children inside the badge.

BorderBorder width and style.2
  • --badge-border-widthborder-width0px
    components.badge.borderWidth

    Border width on the badge. Set non-zero for outline-style variants.

  • --badge-border-styleborder-stylesolid
    components.badge.borderStyle

    Border style on the badge (`solid`, `dashed`, `double`, `none`).

TypographyTypeface, size, weight, spacing.6
  • --badge-font-familyfont-familyvar(--font-sans)
    components.badge.fontFamily

    Typeface for badge.

  • --badge-font-sizefont-sizevar(--text-label-md)
    components.badge.fontSize

    Font size for badge.

  • --badge-font-weightfont-weight500
    components.badge.fontWeight

    Font weight for badge.

  • --badge-line-heightline-height1.25
    components.badge.lineHeight

    Line height for badge.

  • --badge-letter-spacingletter-spacing0
    components.badge.letterSpacing

    Letter spacing for badge. Useful for caps labels.

  • --badge-text-transformtext-transformnone
    components.badge.textTransform

    Text transform for badge (`uppercase`, `lowercase`, `capitalize`, `none`).

MotionAnimation duration and easing.2
  • --badge-durationdurationvar(--motion-standard-duration)
    components.badge.duration

    Transition duration for badge state changes.

  • --badge-easingeasingvar(--motion-standard-easing)
    components.badge.easing

    Transition easing for badge state changes.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.badge, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines
{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "badge": {
      "paddingX": "calc(var(--spacing) * 2)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-badge-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Badge. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

  • asChilddefault false
    boolean
    When true, render the child element instead of the default DOM node and merge props. Lets you compose with <a>, <Link>, or another primitive while keeping behavior and styling.
  • variantdefault 'default'
    'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'
    Visual treatment matching the Button variants (default, secondary, destructive, outline, etc.).