Mosaic Logo

Mosaic Tiles Demo

Badge

A small label component for highlighting status, categories, and metadata.

Examples

Badge Variants

Available badge colors: Primary, Secondary, Success, Warning, Danger, and Info

PrimarySecondarySuccessWarningDangerInfo
View Code
use leptos::prelude::*;
use mosaic_tiles::badge::{Badge, BadgeVariant};

#[component]
pub fn VariantsExample() -> impl IntoView {
    view! {
        <div class="flex flex-wrap gap-3 items-center">
            <Badge variant=BadgeVariant::Primary>"Primary"</Badge>
            <Badge variant=BadgeVariant::Secondary>"Secondary"</Badge>
            <Badge variant=BadgeVariant::Success>"Success"</Badge>
            <Badge variant=BadgeVariant::Warning>"Warning"</Badge>
            <Badge variant=BadgeVariant::Danger>"Danger"</Badge>
            <Badge variant=BadgeVariant::Info>"Info"</Badge>
        </div>
    }
}

Badge Sizes

Available sizes: Small, Medium, and Large

SmallMediumLarge
View Code
use leptos::prelude::*;
use mosaic_tiles::badge::{Badge, BadgeSize, BadgeVariant};

#[component]
pub fn SizesExample() -> impl IntoView {
    view! {
        <div class="flex flex-wrap gap-3 items-center">
            <Badge size=BadgeSize::Small variant=BadgeVariant::Primary>
                "Small"
            </Badge>
            <Badge size=BadgeSize::Medium variant=BadgeVariant::Primary>
                "Medium"
            </Badge>
            <Badge size=BadgeSize::Large variant=BadgeVariant::Primary>
                "Large"
            </Badge>
        </div>
    }
}

Usage Examples

Common use cases: status indicators, categories, counts, and priority levels

Status Indicators

ActivePendingInactiveDraft

Categories

TechnologyDesignBusinessMarketing

Counts and Metrics

Notifications12New Messages3Tasks7

Priority Levels

High PriorityCritical task requires immediate attention
Medium PriorityImportant but not urgent
Low PriorityCan be addressed later
View Code
use leptos::prelude::*;
use mosaic_tiles::badge::{Badge, BadgeSize, BadgeVariant};

#[component]
pub fn UsageExample() -> impl IntoView {
    view! {
        <div class="space-y-6">
            <div>
                <h4 class="text-base font-semibold mb-2">"Status Indicators"</h4>
                <div class="flex flex-wrap gap-3 items-center">
                    <Badge variant=BadgeVariant::Success>"Active"</Badge>
                    <Badge variant=BadgeVariant::Warning>"Pending"</Badge>
                    <Badge variant=BadgeVariant::Danger>"Inactive"</Badge>
                    <Badge variant=BadgeVariant::Info>"Draft"</Badge>
                </div>
            </div>

            <div>
                <h4 class="text-base font-semibold mb-2">"Categories"</h4>
                <div class="flex flex-wrap gap-2 items-center">
                    <Badge size=BadgeSize::Small variant=BadgeVariant::Secondary>
                        "Technology"
                    </Badge>
                    <Badge size=BadgeSize::Small variant=BadgeVariant::Secondary>
                        "Design"
                    </Badge>
                    <Badge size=BadgeSize::Small variant=BadgeVariant::Secondary>
                        "Business"
                    </Badge>
                    <Badge size=BadgeSize::Small variant=BadgeVariant::Secondary>
                        "Marketing"
                    </Badge>
                </div>
            </div>

            <div>
                <h4 class="text-base font-semibold mb-2">"Counts and Metrics"</h4>
                <div class="flex flex-wrap gap-3 items-center">
                    <span class="text-gray-700">"Notifications"</span>
                    <Badge size=BadgeSize::Small variant=BadgeVariant::Danger>
                        "12"
                    </Badge>
                    <span class="text-gray-700 ml-6">"New Messages"</span>
                    <Badge size=BadgeSize::Small variant=BadgeVariant::Info>
                        "3"
                    </Badge>
                    <span class="text-gray-700 ml-6">"Tasks"</span>
                    <Badge size=BadgeSize::Small variant=BadgeVariant::Warning>
                        "7"
                    </Badge>
                </div>
            </div>

            <div>
                <h4 class="text-base font-semibold mb-2">"Priority Levels"</h4>
                <div class="space-y-3">
                    <div class="flex items-center gap-3">
                        <Badge variant=BadgeVariant::Danger>"High Priority"</Badge>
                        <span class="text-sm text-gray-600">
                            "Critical task requires immediate attention"
                        </span>
                    </div>
                    <div class="flex items-center gap-3">
                        <Badge variant=BadgeVariant::Warning>"Medium Priority"</Badge>
                        <span class="text-sm text-gray-600">"Important but not urgent"</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <Badge variant=BadgeVariant::Info>"Low Priority"</Badge>
                        <span class="text-sm text-gray-600">"Can be addressed later"</span>
                    </div>
                </div>
            </div>
        </div>
    }
}

Badges with Icons

Combining badges with icon components

NewTrending5 Messages
View Code
use leptos::prelude::*;
use mosaic_tiles::badge::{Badge, BadgeVariant};
use mosaic_tiles::icon::*;

#[component]
pub fn WithIconsExample() -> impl IntoView {
    view! {
        <div class="flex flex-wrap gap-3 items-center">
            <Badge variant=BadgeVariant::Info>
                <Icon icon=Info class="w-3 h-3 inline mr-1" />
                "New"
            </Badge>
            <Badge variant=BadgeVariant::Success>
                <Icon icon=IconChevronUp class="w-3 h-3 inline mr-1" />
                "Trending"
            </Badge>
            <Badge variant=BadgeVariant::Warning>
                <Icon icon=Mail class="w-3 h-3 inline mr-1" />
                "5 Messages"
            </Badge>
        </div>
    }
}

Anatomy

use leptos::prelude::*;
use mosaic_tiles::badge::*;

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

API Reference

Badge

A label component for displaying status and metadata.

Implements standard HTML span attributes.

AttributeTypeDefaultDescription
variantBadgeVariantPrimaryColor variant: Primary, Secondary, Success, Warning, Danger, or Info
sizeBadgeSizeMediumSize variant: Small, Medium, or Large
childrenOption<Children>NoneBadge content (text, icons, etc.)