Sivir UI
79

Badge

Pick one of nine variants. Set href to render an anchor instead of a div, dot to add a small marker before the text, or icon to add a leading icon.

Draft
<script lang="ts">
    import { Badge } from '@sivir-ui/svelte/components/badge';
</script>

<Badge>Draft</Badge>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add badge

Usage

variant defaults to secondary. icon takes a component such as a Lucide icon, sized by iconSize (13 by default).

import { Badge } from '@sivir-ui/svelte/components/badge';

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

Examples

With dot

Server status
Online
Database
Syncing
API
Offline
<script lang="ts">
    import { Badge } from '@sivir-ui/svelte/components/badge';
</script>

<div class="w-full max-w-md flex flex-col gap-3">
    <div class="flex items-center justify-between">
        <span class="text-sm">Server status</span>
        <Badge variant="success" dot>Online</Badge>
    </div>
    <div class="flex items-center justify-between">
        <span class="text-sm">Database</span>
        <Badge variant="warning" dot>Syncing</Badge>
    </div>
    <div class="flex items-center justify-between">
        <span class="text-sm">API</span>
        <Badge variant="destructive" dot>Offline</Badge>
    </div>
</div>

With icon

Backup complete
Done
Scheduled maintenance
Scheduled
Critical issue
Alert
<script lang="ts">
    import AlertCircle from '@lucide/svelte/icons/alert-circle';
    import Check from '@lucide/svelte/icons/check';
    import Clock from '@lucide/svelte/icons/clock';
    import { Badge } from '@sivir-ui/svelte/components/badge';
</script>

<div class="w-full max-w-md flex flex-col gap-3">
    <div class="flex items-center justify-between">
        <span class="text-sm">Backup complete</span>
        <Badge variant="success" icon={Check}>Done</Badge>
    </div>
    <div class="flex items-center justify-between">
        <span class="text-sm">Scheduled maintenance</span>
        <Badge variant="info" icon={Clock}>Scheduled</Badge>
    </div>
    <div class="flex items-center justify-between">
        <span class="text-sm">Critical issue</span>
        <Badge variant="error" icon={AlertCircle}>Alert</Badge>
    </div>
</div>

As link

<script lang="ts">
    import { Badge } from '@sivir-ui/svelte/components/badge';
</script>

<div class="w-full max-w-md flex flex-col gap-3">
    <div class="flex items-center gap-2">
        <span class="text-sm">Tags:</span>
        <Badge href="#" variant="secondary">Svelte</Badge>
        <Badge href="#" variant="outline">UI</Badge>
        <Badge href="#" variant="primary">Components</Badge>
    </div>
    <div class="flex items-center gap-2">
        <span class="text-sm">Filters:</span>
        <Badge href="#" variant="info">Recent</Badge>
        <Badge href="#" variant="success">Verified</Badge>
    </div>
</div>

Anatomy

Badge - Renders a short label, or a link when given href.