Badge

Rust UI Icons - ChevronLeftRust UI Icons - ChevronRight

Rust UI component that displays a badge or a component that looks like a badge.

  • Rust UI Icons - CopyCopy Demo
Default
use leptos::prelude::*;

use crate::components::ui::badge::Badge;

#[component]
pub fn DemoBadge() -> impl IntoView {
    view! { <Badge>"Default"</Badge> }
}

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_badge
ui add badge

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/badge.rs

use leptos::prelude::*;
use leptos_ui::variants;

variants! {
    Badge {
        base: "inline-flex items-center font-semibold rounded-md border transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 w-fit",
        variants: {
            variant: {
                Default: "border-transparent shadow bg-primary text-primary-foreground hover:bg-primary/80",
                Secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
                Accent: "border-transparent bg-accent text-accent-foreground hover:bg-accent/80",
                Muted: "border-transparent bg-muted text-muted-foreground hover:bg-muted/80",
                Destructive: "border-transparent shadow bg-destructive text-destructive-foreground hover:bg-destructive/80",
                Outline: "text-foreground",
            },
            size: {
                Default: "px-2.5 py-0.5 text-xs",
                Sm: "px-1.5 py-0.5 text-[10px]",
                Lg: "px-3 py-1 text-sm",
            }
        },
        component: {
            element: span
        }
    }
}

Update the imports to match your project setup.

Usage

use crate::components::ui::badge::Badge;

<Badge>"Badge"</Badge>

Examples

1. Variants

  • Rust UI Icons - CopyCopy Demo
DefaultSecondaryDestructiveOutline
use leptos::prelude::*;

use crate::components::ui::badge::{Badge, BadgeVariant};

#[component]
pub fn DemoBadgeVariants() -> impl IntoView {
    view! {
        <div class="flex flex-col gap-4 items-center md:flex-row">
            <Badge>Default</Badge>
            <Badge variant=BadgeVariant::Secondary>Secondary</Badge>
            <Badge variant=BadgeVariant::Destructive>Destructive</Badge>
            <Badge variant=BadgeVariant::Outline>Outline</Badge>
        </div>
    }
}

2. Custom

  • Rust UI Icons - CopyCopy Demo
Cutstom
use leptos::prelude::*;

use crate::components::ui::badge::Badge;

#[component]
pub fn DemoBadgeCustom() -> impl IntoView {
    view! {
        <div class="flex gap-2 items-center">
            <Badge class="bg-sky-500">Cutstom</Badge>
        </div>
    }
}
Rust UI Icons - ChevronLeftAnimate GroupBreadcrumbRust UI Icons - ChevronRight