vertigo_forms/
button.rs

1use std::rc::Rc;
2use vertigo::{component, css, dom};
3
4#[derive(Clone, Copy, PartialEq)]
5pub enum ButtonColor {
6    Primary,
7    Success,
8    Danger,
9    Secondary,
10}
11
12#[derive(Clone, Copy, PartialEq)]
13pub enum ButtonVariant {
14    Text,
15    Outline,
16}
17
18#[component]
19pub fn Button(
20    label: String,
21    on_click: Rc<dyn Fn() + 'static>,
22    color: ButtonColor,
23    variant: ButtonVariant,
24) {
25    let style = match (variant, color) {
26        (ButtonVariant::Text, ButtonColor::Primary) => css! {"
27            font-size: 0.8rem; cursor: pointer; font-weight: 600;
28            color: #007bff;
29            :hover { text-decoration: underline; }
30        "},
31        (ButtonVariant::Text, ButtonColor::Success) => css! {"
32            font-size: 0.8rem; cursor: pointer; font-weight: 600;
33            color: #28a745;
34            :hover { text-decoration: underline; }
35        "},
36        (ButtonVariant::Text, ButtonColor::Danger) => css! {"
37            font-size: 0.8rem; cursor: pointer; font-weight: 600;
38            color: #dc3545;
39            :hover { text-decoration: underline; }
40        "},
41        (ButtonVariant::Text, ButtonColor::Secondary) => css! {"
42            font-size: 0.8rem; cursor: pointer; font-weight: 600;
43            color: #6c757d;
44            :hover { text-decoration: underline; }
45        "},
46        (ButtonVariant::Outline, ButtonColor::Danger) => css! {"
47            font-size: 0.8rem; cursor: pointer; font-weight: 700;
48            background: #fff; padding: 4px 12px; border-radius: 4px;
49            border: 1px solid #dc3545; color: #dc3545;
50            :hover { background: #dc3545; color: #fff; }
51        "},
52        (ButtonVariant::Outline, ButtonColor::Primary) => css! {"
53            font-size: 0.8rem; cursor: pointer; font-weight: 700;
54            background: #fff; padding: 4px 12px; border-radius: 4px;
55            border: 1px solid #007bff; color: #007bff;
56            :hover { background: #007bff; color: #fff; }
57        "},
58        (ButtonVariant::Outline, ButtonColor::Success) => css! {"
59            font-size: 0.8rem; cursor: pointer; font-weight: 700;
60            background: #fff; padding: 4px 12px; border-radius: 4px;
61            border: 1px solid #28a745; color: #28a745;
62            :hover { background: #28a745; color: #fff; }
63        "},
64        (ButtonVariant::Outline, ButtonColor::Secondary) => css! {"
65            font-size: 0.8rem; cursor: pointer; font-weight: 700;
66            background: #fff; padding: 4px 12px; border-radius: 4px;
67            border: 1px solid #6c757d; color: #6c757d;
68            :hover { background: #6c757d; color: #fff; }
69        "},
70    };
71
72    dom! {
73        <div
74            on_click={move |_| on_click()}
75            css={style}
76        >
77            {label}
78        </div>
79    }
80}
81
82#[component]
83pub fn TableButton(label: String, on_click: Rc<dyn Fn() + 'static>) {
84    dom! {
85        <div
86            on_click={move |_| on_click()}
87            css={css! {"
88                padding: 8px 16px;
89                background: #232323;
90                color: #fff;
91                border-radius: 8px;
92                font-size: 0.9rem;
93                font-weight: 600;
94                cursor: pointer;
95                transition: all 0.2s;
96                :hover { background: #444; }
97            "}}
98        >
99            { label }
100        </div>
101    }
102}
vertigo_forms/button.rs

vertigo_forms/
button.rs
