leptos_bootstrap/v5/
button.rs

1use leptos::prelude::*;
2use std::fmt;
3
4pub enum ButtonKind {
5    Primary,
6    Secondary,
7    Success,
8    Danger,
9    Warning,
10    Info,
11    Light,
12    Dark,
13    Link,
14    OutlinePrimary,
15    OutlineSecondary,
16    OutlineSuccess,
17    OutlineDanger,
18    OutlineWarning,
19    OutlineInfo,
20    OutlineLight,
21    OutlineDark,
22    Close,
23}
24
25impl fmt::Display for ButtonKind {
26    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
27        let s = match self {
28            Self::Primary => "btn-primary",
29            Self::Secondary => "btn-secondary",
30            Self::Success => "btn-success",
31            Self::Danger => "btn-danger",
32            Self::Warning => "btn-warning",
33            Self::Info => "btn-info",
34            Self::Light => "btn-light",
35            Self::Dark => "btn-dark",
36            Self::Link => "btn-link",
37            Self::OutlinePrimary => "btn-outline-primary",
38            Self::OutlineSecondary => "btn-outline-secondary",
39            Self::OutlineSuccess => "btn-outline-success",
40            Self::OutlineDanger => "btn-outline-danger",
41            Self::OutlineWarning => "btn-outline-warning",
42            Self::OutlineInfo => "btn-outline-info",
43            Self::OutlineLight => "btn-outline-light",
44            Self::OutlineDark => "btn-outline-dark",
45            Self::Close => "btn-close",
46        };
47        write!(f, "{}", s)
48    }
49}
50
51pub enum ButtonSize {
52    Small,
53    Normal,
54    Large,
55}
56
57impl fmt::Display for ButtonSize {
58    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
59        let s = match self {
60            Self::Small => "btn-sm",
61            Self::Normal => "",
62            Self::Large => "btn-lg",
63        };
64        write!(f, "{}", s)
65    }
66}
67
68#[component]
69pub fn Button<'a>(
70    #[prop(default = ButtonKind::Primary)] kind: ButtonKind,
71    #[prop(default = ButtonSize::Normal)] size: ButtonSize,
72    #[prop(default = false)] disabled: bool,
73    #[prop(default = false)] active: bool,
74    #[prop(optional, into)] class: &'a str,
75    children: Children,
76) -> impl IntoView {
77    let mut class = format!("btn {} {} {}", kind, size, class.trim());
78    if active {
79        class.push_str(" active");
80    }
81    view! {
82        <button type="button" class=class disabled=disabled>
83            {children()}
84        </button>
85    }
86}
87
88#[component]
89pub fn ButtonGroup<'a>(
90    #[prop(default = ButtonSize::Normal)] size: ButtonSize,
91    #[prop(optional, into)] class: &'a str,
92    children: Children,
93) -> impl IntoView {
94    let class = format!("btn-group {} {}", size, class.trim());
95    view! {
96        <div class=class role="group">
97            {children()}
98        </div>
99    }
100}