Badge

A compact label for status, counts, and tags.

Label

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add badge

Usage

Import the Badge and use it in your component:

import { Badge } from '$lib/sivir/components/badge';

<Badge>New</Badge>
<Badge variant="outline" dot>Label</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="error">Failed</Badge>

Examples

Explore Badge variants and shapes for different use cases.

Shapes

Pill, circular, square-ish, and a rounded square with a 1px border.

Beta

Draft

Live

Primary

Secondary

Ghost

Outline

Destructive

Info

Success

Warning

Error

Anatomy

Badge - Displays a compact status label.