Displays a badge or a component that looks like a badge.
use yew::prelude::*;
use crate::components::ui::badge::Badge;
#[function_component]
pub fn BadgeDemo() -> Html {
html! {
<Badge>{"Badge"}</Badge>
}
}
use yew::prelude::*;
use crate::components::ui::badge::Badge;
#[function_component]
pub fn BadgeDemo() -> Html {
html! {
<Badge>{"Badge"}</Badge>
}
}
The CLI is not yet available. For now, manually copy the component source into your project.
use yew::prelude::*;
use crate::components::ui::badge::{Badge, BadgeVariant};
#[component]
fn Usage() -> impl IntoView {
view! {
<Badge variant={BadgeVariant::Outline}>{"Badge"}>/Badge>
}
}
You can use the BadgeVariant helper to create a link that looks like a badge.
use yew::prelude::*;
use yew_router::prelude::*;
use crate::components::ui::badge::{Badge, BadgeClass, BadgeVariant};
#[component]
fn Usage() -> impl IntoView {
view! {
<Link class={BadgeClass::builder().variant(BadgeVariant::Outline).build().to_class()}>
{"Badge"}
</Link>
}
}
use yew::prelude::*;
use crate::components::ui::badge::Badge;
#[function_component]
pub fn BadgeDemo() -> Html {
html! {
<Badge>{"Badge"}</Badge>
}
}
use yew::prelude::*;
use crate::components::ui::badge::Badge;
#[function_component]
pub fn BadgeDemo() -> Html {
html! {
<Badge>{"Badge"}</Badge>
}
}
use yew::prelude::*;
use crate::default::components::ui::badge::{Badge, BadgeVariant};
#[function_component]
pub fn BadgeSecondary() -> Html {
html! {
<Badge variant={BadgeVariant::Secondary}>{"Secondary"}</Badge>
}
}
use yew::prelude::*;
use crate::new_york::components::ui::badge::{Badge, BadgeVariant};
#[function_component]
pub fn BadgeSecondary() -> Html {
html! {
<Badge variant={BadgeVariant::Secondary}>{"Secondary"}</Badge>
}
}
use yew::prelude::*;
use crate::default::components::ui::badge::{Badge, BadgeVariant};
#[function_component]
pub fn BadgeOutline() -> Html {
html! {
<Badge variant={BadgeVariant::Outline}>{"Outline"}</Badge>
}
}
use yew::prelude::*;
use crate::new_york::components::ui::badge::{Badge, BadgeVariant};
#[function_component]
pub fn BadgeOutline() -> Html {
html! {
<Badge variant={BadgeVariant::Outline}>{"Outline"}</Badge>
}
}
use yew::prelude::*;
use crate::default::components::ui::badge::{Badge, BadgeVariant};
#[function_component]
pub fn BadgeDestructive() -> Html {
html! {
<Badge variant={BadgeVariant::Destructive}>{"Destructive"}</Badge>
}
}
use yew::prelude::*;
use crate::new_york::components::ui::badge::{Badge, BadgeVariant};
#[function_component]
pub fn BadgeDestructive() -> Html {
html! {
<Badge variant={BadgeVariant::Destructive}>{"Destructive"}</Badge>
}
}