use dioxus::prelude::*;
#[derive(Clone, Debug, PartialEq, Default)]
pub enum ButtonVariant {
#[default]
Primary,
Secondary,
Danger,
Ghost,
}
#[derive(Clone, Debug, PartialEq, Default)]
pub enum ButtonSize {
Small,
#[default]
Medium,
Large,
}
#[component]
pub fn Button(
children: Element,
#[props(default)] variant: ButtonVariant,
#[props(default)] size: ButtonSize,
#[props(default = false)] disabled: bool,
#[props(default = false)] loading: bool,
onclick: Option<EventHandler<MouseEvent>>,
) -> Element {
let variant_class = match variant {
ButtonVariant::Primary => "btn--primary",
ButtonVariant::Secondary => "btn--secondary",
ButtonVariant::Danger => "btn--danger",
ButtonVariant::Ghost => "btn--ghost",
};
let size_class = match size {
ButtonSize::Small => "btn--sm",
ButtonSize::Medium => "btn--md",
ButtonSize::Large => "btn--lg",
};
rsx! {
button {
class: "btn {variant_class} {size_class}",
disabled: disabled || loading,
onclick: move |evt| {
if let Some(handler) = &onclick {
handler.call(evt);
}
},
if loading {
span { class: "btn__spinner" }
}
{children}
}
}
}