Badge

Displays a badge component.

BadgeSecondaryDestructiveOutline

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn BadgeExample() -> impl IntoView {
    view! {
        <div class="flex flex-wrap gap-2">
            <Badge>"Badge"</Badge>
            <Badge variant="secondary">"Secondary"</Badge>
            <Badge variant="destructive">"Destructive"</Badge>
            <Badge variant="outline">"Outline"</Badge>
        </div>
    }
}

Variants

Use the variant prop to change the variant of the badge.

InvalidSecondaryDestructiveOutlineGhost

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn BadgeVariantsExample() -> impl IntoView {
    view! {
        <div class="flex flex-wrap gap-2">
            <Badge invalid=true>"Invalid"</Badge>
            <Badge variant="secondary">"Secondary"</Badge>
            <Badge variant="destructive">"Destructive"</Badge>
            <Badge variant="outline">"Outline"</Badge>
            <Badge variant="ghost">"Ghost"</Badge>
        </div>
    }
}

With Icon

VerifiedBookmark

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn BadgeIconExample() -> impl IntoView {
    view! {
        <div class="flex flex-wrap gap-2">
            <Badge variant="secondary">{icon!(icondata::LuCheck)}<span>Verified</span></Badge>
            <Badge variant="outline">
                <span>Bookmark</span>
                {icon!(icondata::LuBookmark)}
            </Badge>
        </div>
    }
}

With Spinner

DeletingGenerating

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn BadgeSpinnerExample() -> impl IntoView {
    view! {
        <div class="flex flex-wrap gap-2">
            <Badge variant="destructive">
                <Spinner />
                <span>"Deleting"</span>
            </Badge>
            <Badge variant="secondary">
                <span>"Generating"</span>
                <Spinner />
            </Badge>
        </div>
    }
}

Link

Open Link

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn BadgeLinkExample() -> impl IntoView {
    view! {
        <Link render_as="badge" href="#link">
            <span>"Open Link "</span>
            {icon!(icondata::LuArrowUpRight)}
        </Link>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::*;

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

API Reference

Badge

Contains arbitrary badge content.

Custom Attributes
Name	Type	Default	Description
invalid	bool	false	Toggle whether or not this badge appears invalid.
variant	String	"primary"	Define the badge variant. Accepted values: "primary" \| "secondary" \| "destructive" \| "outline"

Implements global attributes.

Getting Started

Components

Badge

Variants

With Icon

With Spinner

Link

Anatomy

API Reference

Badge