Badge

A compact label for status, counts, and tags.

New

Installation

Copy the command below and run it in your terminal.

bunx @sivir/ui add badge

Usage

Import the Badge and use it in your component:

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

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

Examples

Explore Badge variants for different use cases.

Primary

Primary

Secondary

Secondary

Ghost

Ghost

Outline

Outline

Destructive

Destructive

Info

Info

Success

Success

Warning

Warning

Error

Error