leptos-shadcn-ui/docs/components/api/badge.md

Badge Component API

A small status indicator component for displaying labels and counts.

---

Installation

# Cargo.toml
[dependencies]
shadcn-ui-leptos-badge = "0.7"

use shadcn_ui_leptos_badge::Badge;

---

Import

use shadcn_ui_leptos_badge::{
    Badge,
    BadgeVariant
};

---

Component API

Badge

Prop	Type	Default	Description
variant	MaybeProp<BadgeVariant>	Default	Badge style
class	MaybeProp<String>	None	Additional CSS classes
children	Option<Children>	None	Badge content

BadgeVariant

pub enum BadgeVariant {
    Default,     // Neutral gray
    Primary,     // Brand primary color
    Secondary,   // Secondary color
    Destructive, // Red for errors
    Outline,     // Bordered outline
    Success,     // Green for success
}

---

Usage Examples

Basic Badge

use leptos::prelude::*;
use shadcn_ui_leptos_badge::*;

#[component]
pub fn MyComponent() -> impl IntoView {
    view! {
        <Badge variant=BadgeVariant::Default>
            "New"
        </Badge>
    }
}

Badge Variants

view! {
    <div class="flex gap-2">
        <Badge variant=BadgeVariant::Default>"Default"</Badge>
        <Badge variant=BadgeVariant::Primary>"Primary"</Badge>
        <Badge variant=BadgeVariant::Secondary>"Secondary"</Badge>
        <Badge variant=BadgeVariant::Destructive>"Error"</Badge>
        <Badge variant=BadgeVariant::Outline>"Outline"</Badge>
        <Badge variant=BadgeVariant::Success>"Success"</Badge>
    </div>
}

Count Badge

view! {
    <div class="relative">
        <button>"Notifications"</button>
        <Badge class="absolute -top-2 -right-2 px-2 py-0.5">
            "3"
        </Badge>
    </div>
}

---

CSS Classes

.badge {
    inline-flex items-center rounded-full border
    px-2.5 py-0.5 text-xs font-semibold
    transition-colors focus:outline-none focus:ring-2
    focus:ring-ring focus:ring-offset-2
}

.badge-default {
    border-transparent bg-primary text-primary-foreground
    hover:bg-primary/80
}

.badge-secondary {
    border-transparent bg-secondary
    text-secondary-foreground hover:bg-secondary/80
}

.badge-destructive {
    border-transparent bg-destructive
    text-destructive-foreground hover:bg-destructive/80
}

.badge-outline {
    text-foreground
}

.badge-success {
    border-transparent bg-green-500 text-white
    hover:bg-green-600
}

---

Accessibility

ARIA Attributes

• aria-label - For status badges
• Semantic color usage for meaning

---

TypeScript API

interface BadgeProps {
  variant?: 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success';
  className?: string;
  children?: React.ReactNode;
}

export const Badge: React.FC<BadgeProps>;

---

Source: packages/leptos/badge/src/default.rs