Badge

A compact label component for displaying status indicators, counts, and categories. Supports 6 color families each with default, bordered, and solid sub-variants.

Component Source

View the source code for the badge component.

$lib/components/ui/badge/badge.svelte

Installation

npx nnuikit add badge

import { Badge } from "$lib/components/ui/badge";

Quick Start

Default Neutral Error Active

<script lang="ts">
  import { Badge } from "$lib/components/ui/badge";
</script>

<Badge>Default</Badge>
<Badge variant="neutral">Neutral</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="success">Active</Badge>

Interactive Playground

Customize the badge's appearance using the controls below.

Badge

<Badge>Badge</Badge>

Variant

Size

Options

Fully Rounded

Variants

Six color families, each with default, bordered, and solid sub-variants.

Brand

Primary

<Badge variant="primary">Primary</Badge>

Default brand badge

Primary Bordered

<Badge variant="primary-bordered">Primary Bordered</Badge>

Brand with border

Primary Solid

<Badge variant="primary-solid">Primary Solid</Badge>

Solid brand fill

Neutral

<Badge variant="neutral">Neutral</Badge>

Default neutral badge

Neutral Bordered

<Badge variant="neutral-bordered">Neutral Bordered</Badge>

Neutral with border

Neutral Solid

<Badge variant="neutral-solid">Neutral Solid</Badge>

Solid neutral fill

Destructive

<Badge variant="destructive">Destructive</Badge>

Error or danger state

Destructive Bordered

<Badge variant="destructive-bordered">Destructive Bordered</Badge>

Destructive with border

Destructive Solid

<Badge variant="destructive-solid">Destructive Solid</Badge>

Solid destructive fill

Warning

<Badge variant="warning">Warning</Badge>

Caution or alert state

Warning Bordered

<Badge variant="warning-bordered">Warning Bordered</Badge>

Warning with border

Warning Solid

<Badge variant="warning-solid">Warning Solid</Badge>

Solid warning fill

Success

<Badge variant="success">Success</Badge>

Positive or completed state

Success Bordered

<Badge variant="success-bordered">Success Bordered</Badge>

Success with border

Success Solid

<Badge variant="success-solid">Success Solid</Badge>

Solid success fill

Info

<Badge variant="info">Info</Badge>

Informational badge

Info Bordered

<Badge variant="info-bordered">Info Bordered</Badge>

Info with border

Info Solid

<Badge variant="info-solid">Info Solid</Badge>

Solid info fill

Sizes

Three sizes to fit different contexts, from compact inline labels to prominent callouts.

Small

size="sm"

Badge

<Badge size="sm">Badge</Badge>

Medium

size="md"

Badge

<Badge size="md">Badge</Badge>

Large

size="lg"

Badge

<Badge size="lg">Badge</Badge>

Rounded

Use the rounded prop to apply a fully rounded pill shape.

Semi-rounded Fully rounded

<Badge>Semi-rounded</Badge>
<Badge rounded>Fully rounded</Badge>

With Icons

Badges automatically size nested SVG icons and avatar slots via the [&>svg] selector.

Verified Rejected

<Badge variant="success">
  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round"
      stroke-width="2" d="M5 13l4 4L19 7" />
  </svg>
  Verified
</Badge>

<Badge variant="destructive-bordered">
  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round"
      stroke-width="2" d="M6 18L18 6M6 6l12 12" />
  </svg>
  Rejected
</Badge>

As Link

Pass an href prop to render the badge as an anchor element.

Linked Badge

<Badge href="/docs/components/badge">Linked Badge</Badge>

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "primary-bordered" \| "primary-solid" \| "neutral" \| "neutral-bordered" \| "neutral-solid" \| "destructive" \| "destructive-bordered" \| "destructive-solid" \| "warning" \| "warning-bordered" \| "warning-solid" \| "success" \| "success-bordered" \| "success-solid" \| "info" \| "info-bordered" \| "info-solid"`	"primary"	The visual style of the badge. Each color has default, bordered, and solid sub-variants.
`size`	`"sm" \| "md" \| "lg"`	"md"	The size of the badge. Affects height, padding, font size, and icon size.
`rounded`	`boolean`	false	If true, applies fully rounded (pill) shape instead of the default semi-rounded corners.
`href`	`string`	undefined	If provided, renders the badge as an anchor (<a>) tag with the specified URL.
`class`	`string`	""	Additional CSS classes to merge with the badge styles.
`ref`	`HTMLElement \| null`	null	Binding to the underlying HTML element.
`children`	`Snippet`	-	The content rendered inside the badge (text, icons, etc.).