Badge

Preview

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

npx shadcn@latest add https://ds.interlace.tools/r/badge.json

npx shadcn@latest add @interlace/badge

Import

2 named exports — pull the parts you need.

import { Badge, badgeVariants } from '@/components/ui/badge';

Anatomy

Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.

Badge                            (span by default, or the `render` element)
    └─ children                    (text and/or an svg, sized to size-3 here)

Variants

Closed prop unions enforced by class-variance-authority. See Storybook's Variants story for the rendered matrix.

• variant
  • defaultdefault
  • secondary
  • destructive
  • outline
  • ghost
  • link

API reference

Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.

Skeleton

Pass loading and the component renders a shape-matched <Skeleton /> in its own place — same box, so nothing reflows when the data lands. Below is the same story with loading={true}.

<Badge loading={isPending} />

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour

Owned by @base-ui/react/use-render — focus trapping, dismissal and typeahead come from the headless primitive, not from us.

Focus ring (WCAG 2.2 SC 2.4.13)

Inherited from the preflight focus contract shipped in @interlace/theme.

Reduced motion

No animation to gate.

ARIA in the source

• aria-invalid

Examples

2 more states from the same story file.

R-rule compliance

Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.

Dependencies

Base UI primitive

@base-ui/react/use-render

Lucide icons

none

NPM dependencies

• @base-ui/react
• class-variance-authority

Registry dependencies

• @interlace/theme
• @interlace/cn
• @interlace/skeleton

Source

The full implementation — components/ui/badge.tsx once installed.

import * as React from 'react';

// @interlace/badge v1.3.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/badge
// What changed since: https://ds.interlace.tools/c/badge#history
// Generated banner — keep it, the upgrade diff reads this version.

/**
 * @interlace/ui — Badge
 *
 * A small pill for a status, a count, a label or a tag. Renders a `<span>` by
 * default, or whatever Base UI's `render` prop is given, so the same badge can
 * be an anchor without losing its shape.
 *
 * Six variants, and every one that names a text colour also paints an opaque
 * surface under it — see the rule below.
 *
 * ## Anatomy
 *
 *   Badge                            (span by default, or the `render` element)

…165 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.