Badge

Small status indicator label

UI PrimitiveDisplay

Overview

A polymorphic badge component with six visual variants. Supports asChild to render as any element (e.g., a link).

Usage

import { Badge } from "@leanicon/web-builder-library";

<Badge>New</Badge>
<Badge variant="secondary">Beta</Badge>
<Badge variant="destructive">Error</Badge>

Variants

Variant

Description

default

Primary background

secondary

Muted background

destructive

Destructive/error background

outline

Border only, transparent background

ghost

No border or background, hover accent

link

Underline on hover (for anchor usage)

DefaultSecondaryErrorDraftArchived

As a link:

<Badge asChild variant="outline">
  <a href="/docs">Docs</a>
</Badge>

Notes

  • asChild renders the badge using Radix UI's Slot.Root, forwarding all props to the child element.
  • SVG icons inside a badge are automatically sized to 12px.
  • Dark mode is handled via semantic tokens.

Props

NameTypeDefaultRequiredDescription
variant"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | nulldefaultNo
asChildbooleanfalseNo