Badge

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

Badge

Inline badge component for labels, tags, and status indicators. Supports multiple visual variants for different use cases.

Installation

bash

deno run -A jsr:@lockness/ui add badge

Usage

tsx

import { Badge } from '@lockness/ui/components'

<Badge>New</Badge>

Props

Prop	Type	Default	Description
variant	`'default' \| 'secondary' \| 'destructive' \| 'outline'`	`'default'`	Visual style variant
children	`unknown`	-	Badge content
class	`string`	-	Additional CSS class names
id	`string`	-	Element id attribute

Variants

Default

Primary colored badge for highlighting important items.

tsx

<Badge>New</Badge>
<Badge variant="default">Featured</Badge>

Secondary

Subtle badge using secondary colors for less prominent labels.

tsx

<Badge variant="secondary">Beta</Badge>
<Badge variant="secondary">Draft</Badge>

Destructive

Alert/error style badge for warnings or critical status.

tsx

<Badge variant="destructive">Error</Badge>
<Badge variant="destructive">Expired</Badge>

Outline

Bordered badge with transparent background.

tsx

<Badge variant="outline">Draft</Badge>
<Badge variant="outline">Pending</Badge>

Examples

Status Indicators

tsx

<div class='flex gap-2'>
    <Badge>Active</Badge>
    <Badge variant='secondary'>Pending</Badge>
    <Badge variant='destructive'>Inactive</Badge>
    <Badge variant='outline'>Draft</Badge>
</div>

In a Card

tsx

<Card>
    <CardHeader>
        <div class='flex items-center justify-between'>
            <CardTitle>Project Alpha</CardTitle>
            <Badge variant='secondary'>In Progress</Badge>
        </div>
    </CardHeader>
    <CardContent>
        <p>Project description here...</p>
    </CardContent>
</Card>

Custom Styling

tsx

// Smaller badge
<Badge class="text-xs px-1.5 py-0.5">Small</Badge>

// Larger badge
<Badge class="text-base px-4 py-1.5">Large</Badge>

// Custom colors
<Badge class="bg-green-500 text-white">Success</Badge>

Tags List

tsx

<div class='flex flex-wrap gap-2'>
    <Badge variant='outline'>React</Badge>
    <Badge variant='outline'>TypeScript</Badge>
    <Badge variant='outline'>Tailwind</Badge>
    <Badge variant='outline'>Deno</Badge>
</div>

CSS Variables

css

@theme {
    --badge-padding-x: 0.625rem;
    --badge-padding-y: 0.125rem;
    --badge-font-size: 0.75rem;
    --badge-font-weight: 500;
    --radius: 0.5rem;
}

VARIANTS

DefaultSecondaryDestructiveOutline

tsx

import { Badge } from '@lockness/ui/components'

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

USE CASES

New FeatureNew

Beta VersionBeta

Critical ErrorError

Draft StatusDraft

tsx

<div class='flex items-center gap-2'>
    <span>New Feature</span>
    <Badge>New</Badge>
</div>

<div class='flex items-center gap-2'>
    <span>Beta Version</span>
    <Badge variant='secondary'>Beta</Badge>
</div>

Edit this page