Badge

A small inline label for status, counts, or categorization. Badges draw the eye to a short piece of metadata — a status, a tag, a count — without pulling focus from the surrounding content.

Use them for things like "New", "Beta", status indicators, or item counts. Keep the text short; a badge is a label, not a sentence.

Usage

BasicA default badge.

<script setup lang="ts">
import { Avatar, Badge, Panel, PanelContent } from "@dlbcodes/ui";
</script>

<template>
    <div class="flex w-full max-w-sm flex-col gap-3">
        <Panel>
            <PanelContent class="flex items-center gap-3 px-4 py-3">
                <Avatar
                    name="Ana Silva"
                    src="https://i.pravatar.cc/120?img=10"
                    size="sm"
                />
                <div class="min-w-0 flex-1">
                    <div class="truncate text-sm font-medium text-text-primary">
                        Ana Silva
                    </div>
                    <div class="truncate text-xs text-text-tertiary">
                        ana@example.com
                    </div>
                </div>
                <Badge variant="success">Active</Badge>
            </PanelContent>
        </Panel>

        <Panel>
            <PanelContent class="flex items-center gap-3 px-4 py-3">
                <Avatar
                    name="John Carter"
                    src="https://i.pravatar.cc/120?img=3"
                    size="sm"
                />
                <div class="min-w-0 flex-1">
                    <div class="min-w-0 flex-1">
                        <div
                            class="truncate text-sm font-medium text-text-primary"
                        >
                            John Carter
                        </div>
                        <div class="truncate text-xs text-text-tertiary">
                            john@example.com
                        </div>
                    </div>
                </div>
                <Badge variant="pending">Invited</Badge>
            </PanelContent>
        </Panel>
    </div>
</template>

Variants

Each variant maps to a semantic color for a different kind of status.

Variantsneutral, success, warning, info, destructive, primary, and outline.

<script setup lang="ts">
import { Badge } from "@dlbcodes/ui";
</script>

<template>
    <div class="flex flex-wrap items-center gap-2">
        <Badge variant="neutral">Neutral</Badge>
        <Badge variant="primary">Primary</Badge>
        <Badge variant="success">Success</Badge>
        <Badge variant="pending">Pending</Badge>
        <Badge variant="info">Info</Badge>
        <Badge variant="destructive">Destructive</Badge>
        <Badge variant="outline">Outline</Badge>
    </div>
</template>

Variant	Use it for
neutral	Tags and general labels (the default)
success	Completed, active, healthy
warning	Pending, needs attention
info	Neutral information, "New", "Beta"
destructive	Failed, blocked, errors
primary	Emphasis in the brand color
outline	A low-key label with no fill

Badge icons are sized automatically: an svg placed inside a badge is scaled to fit the label.

Props

Prop	Type	Default	Description
variant	"neutral" | "success" | "warning" | "info" | "destructive" | "primary" | "outline"	"neutral"	Semantic color variant.
class	string	—	Classes merged onto the root.

Slots: default (the label text, and optionally an icon).

Accessibility

• A badge is decorative/labeling by default. If it conveys status that isn't obvious from its text alone (e.g. color-only meaning), ensure the meaning is also available in text for screen-reader and color-blind users.
• Badge text is small (10px, uppercase), so keep it to a word or two. For anything longer or more important, use regular text or an Alert.