Badge

Stylized badge element.

use radix_yew_themes::{AccentColor, Badge, Flex};
use yew::prelude::*;

#[function_component]
pub fn BadgeExample() -> Html {
    html! {
        <Flex gap=2>
            <Badge color={AccentColor::Orange}>{"In progress"}</Badge>
            <Badge color={AccentColor::Blue}>{"In review"}</Badge>
            <Badge color={AccentColor::Green}>{"Complete"}</Badge>
        </Flex>
    }
}

API Reference

This component is based on the span element and supports common margin props.

Prop	Type	Default
`as_child`	`Option<Callback<BadgeChildProps>>`	-
`size`	`Responsive<1..3>`	`1`
`variant`	`BadgeVariant`	`BadgeVariant::Soft`
`color`	`Option<AccentColor>`	-
`high_contrast`	`Option<bool>`	-
`radius`	`Option<Radius>`	-

Examples

Size

Use the size prop to control the size.

use radix_yew_themes::{AccentColor, Badge, Flex, FlexAlign};
use yew::prelude::*;

#[function_component]
pub fn BadgeSizeExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=2>
            <Badge size=1 color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge size=2 color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge size=3 color={AccentColor::Indigo}>
                {"New"}
            </Badge>
        </Flex>
    }
}

Variant

Use the variant prop to control the visual style.

use radix_yew_themes::{AccentColor, Badge, BadgeVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn BadgeVariantExample() -> Html {
    html! {
        <Flex gap=2>
            <Badge variant={BadgeVariant::Solid} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Soft} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Surface} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Outline} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
        </Flex>
    }
}

Color

Use the color prop to assign a specific color.

use radix_yew_themes::{AccentColor, Badge, Flex};
use yew::prelude::*;

#[function_component]
pub fn BadgeColorExample() -> Html {
    html! {
        <Flex gap=2>
            <Badge color={AccentColor::Indigo}>{"New"}</Badge>
            <Badge color={AccentColor::Cyan}>{"New"}</Badge>
            <Badge color={AccentColor::Orange}>{"New"}</Badge>
            <Badge color={AccentColor::Crimson}>{"New"}</Badge>
        </Flex>
    }
}

High-Contrast

Use the high_contrast prop to increase color contrast with the background.

use radix_yew_themes::{AccentColor, Badge, BadgeVariant, Flex, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn BadgeHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=2>
            <Flex gap=2>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Solid}>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Soft}>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Surface}>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Outline}>
                    {"New"}
                </Badge>
            </Flex>
            <Flex gap=2>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Solid} high_contrast=true>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Soft} high_contrast=true>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Surface} high_contrast=true>
                    {"New"}
                </Badge>
                <Badge color={AccentColor::Gray} variant={BadgeVariant::Outline} high_contrast=true>
                    {"New"}
                </Badge>
            </Flex>
        </Flex>
    }
}

Radius

Use the radius prop to assign a specific radius value.

use radix_yew_themes::{AccentColor, Badge, BadgeVariant, Flex, Radius};
use yew::prelude::*;

#[function_component]
pub fn BadgeRadiusExample() -> Html {
    html! {
        <Flex gap=2>
            <Badge variant={BadgeVariant::Solid} radius={Radius::None} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Solid} radius={Radius::Small} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Solid} radius={Radius::Medium} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Solid} radius={Radius::Large} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
            <Badge variant={BadgeVariant::Solid} radius={Radius::Full} color={AccentColor::Indigo}>
                {"New"}
            </Badge>
        </Flex>
    }
}

Rust Radix