Badge

Displays a badge or a component that looks like a badge.

PrimarySecondaryDestructiveOutline

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

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

Invalid

PrimarySecondaryDestructiveOutline

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

#[component]
pub fn BadgeInvalidExample() -> impl IntoView {
    view! {
        <div class="space-x-2">
            <Badge attr:aria-invalid="true">"Primary"</Badge>
            <Badge attr:aria-invalid="true" variant="secondary">
                "Secondary"
            </Badge>
            <Badge attr:aria-invalid="true" variant="destructive">
                "Destructive"
            </Badge>
            <Badge attr:aria-invalid="true" variant="outline">
                "Outline"
            </Badge>
        </div>
    }
}

With Icon

PrimarySecondaryDestructiveOutline

use icondata::FiAlertCircle;
use leptos::prelude::*;
use singlestage::{badge::*, icon};

#[component]
pub fn BadgeIconExample() -> impl IntoView {
    view! {
        <div class="space-x-2">
            <Badge>{icon!(FiAlertCircle)} "Primary"</Badge>
            <Badge variant="secondary">{icon!(FiAlertCircle)} "Secondary"</Badge>
            <Badge variant="destructive">{icon!(FiAlertCircle)}"Destructive"</Badge>
            <Badge variant="outline">{icon!(FiAlertCircle)} "Outline"</Badge>
        </div>
    }
}

Link

Link Link Link Link

use icondata::LuArrowRight;
use leptos::prelude::*;
use singlestage::{badge::*, icon};

#[component]
pub fn BadgeLinkExample() -> impl IntoView {
    view! {
        <div class="space-x-2">
            <a href="#">
                <Badge>"Link" {icon!(LuArrowRight)}</Badge>
            </a>
            <a href="#">
                <Badge variant="secondary">"Link" {icon!(LuArrowRight)}</Badge>
            </a>
            <a href="#">
                <Badge variant="destructive">"Link" {icon!(LuArrowRight)}</Badge>
            </a>
            <a href="#">
                <Badge variant="outline">"Link" {icon!(LuArrowRight)}</Badge>
            </a>
        </div>
    }
}

Anatomy

Import all parts and piece them together.

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

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

API Reference

Badge

Contains arbitrary badge content.

Custom Attributes
Name	Type	Default	Description
variant	String	"primary"	Specifies the style of badge to display.

Implements global attributes.