Badge

A small status label for states like Ready or 2 flags. Each tone pairs a soft background with a strong text colour.

Ready2 flagsFailedIn reviewNewDraft

Usage

use hydroxy_leptos::badge::{Badge, Tone};
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    view! {
        <div style="display: flex; flex-wrap: wrap; gap: var(--space-3);">
            <Badge tone=Tone::Success dot=true>"Ready"</Badge>
            <Badge tone=Tone::Warning>"2 flags"</Badge>
            <Badge tone=Tone::Danger>"Failed"</Badge>
            <Badge tone=Tone::Info dot=true>"In review"</Badge>
            <Badge tone=Tone::Accent>"New"</Badge>
            <Badge>"Draft"</Badge>
        </div>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::badge::{Badge, Tone};

#[component]
pub fn BadgeDemo() -> Element {
    rsx! {
        div { style: "display: flex; flex-wrap: wrap; gap: var(--space-3);",
            Badge { tone: Tone::Success, dot: true, "Ready" }
            Badge { tone: Tone::Warning, "2 flags" }
            Badge { tone: Tone::Danger, "Failed" }
            Badge { tone: Tone::Info, dot: true, "In review" }
            Badge { tone: Tone::Accent, "New" }
            Badge { "Draft" }
        }
    }
}

Anatomy

Component	data-part	Renders
`Badge`	(root)	<span data-scope=badge data-tone>
`(inside)`	dot	Optional 6px dot in the text colour, aria-hidden

Props

Prop	Type	Notes
`tone`	Tone	Neutral (default), Success, Warning, Danger, Info or Accent
`dot`	bool	Show a dot before the text. Default false
`children`	View	The label