Badge
Rust UI component that displays a badge or a component that looks like a badge.
Default
use leptos::prelude::*;
use crate::components::ui::badge::Badge;
#[component]
pub fn DemoBadge() -> impl IntoView {
view! { <Badge>"Default"</Badge> }
}
Demos
1. Variants
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
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>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_badgeui add badgeUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/badge.rs
#![allow(dead_code)]
use leptos::prelude::*;
use tw_merge::*;
#[derive(TwClass, Clone, Copy)]
#[tw(
class = "inline-flex items-center px-2.5 py-0.5 text-xs font-semibold rounded-md border transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 w-fit"
)]
pub struct BadgeClass {
pub variant: BadgeVariant,
}
#[derive(TwVariant)]
pub enum BadgeVariant {
#[tw(
default,
class = "border-transparent shadow bg-primary text-primary-foreground hover:bg-primary/80"
)]
Default,
#[tw(class = "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80")]
Secondary,
#[tw(
class = "border-transparent shadow bg-destructive text-destructive-foreground hover:bg-destructive/80"
)]
Destructive,
#[tw(class = "text-foreground")]
Outline,
}
#[component]
pub fn Badge(
#[prop(into, optional)] variant: Signal<BadgeVariant>,
#[prop(into, optional)] class: Signal<String>,
children: Children,
) -> impl IntoView {
let class = Memo::new(move |_| {
let variant = variant.get();
let badge = BadgeClass { variant };
badge.with_class(class.get())
});
view! { <span class=class>{children()}</span> }
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀