Skip to main content

dioxus_bootstrap_css/
badge.rs

1use dioxus::prelude::*;
2
3use crate::types::Color;
4
5/// Bootstrap Badge component.
6///
7/// ```rust
8/// rsx! {
9///     Badge { color: Color::Primary, "New" }
10///     Badge { color: Color::Danger, pill: true, "99+" }
11/// }
12/// ```
13#[derive(Clone, PartialEq, Props)]
14pub struct BadgeProps {
15    /// Badge color variant.
16    #[props(default = Color::Primary)]
17    pub color: Color,
18    /// Use pill (rounded) style.
19    #[props(default)]
20    pub pill: bool,
21    /// Additional CSS classes.
22    #[props(default)]
23    pub class: String,
24    /// Child elements.
25    pub children: Element,
26}
27
28#[component]
29pub fn Badge(props: BadgeProps) -> Element {
30    let pill = if props.pill { " rounded-pill" } else { "" };
31    let full_class = if props.class.is_empty() {
32        format!("badge text-bg-{}{pill}", props.color)
33    } else {
34        format!("badge text-bg-{}{pill} {}", props.color, props.class)
35    };
36
37    rsx! {
38        span { class: "{full_class}", {props.children} }
39    }
40}