reflex/docs/app/reflex_docs/components/button.py at ebc249b0b612327bea55385f8d6bc45612ebc91a · reflex-dev/reflex · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
from typing import Callable, Literal

import reflex as rx
from reflex_ui_shared.components.icons import get_icon

LiteralButtonVariant = Literal[
    "primary", "success", "destructive", "secondary", "muted"
]

default_class_name = "text-sm font-semibold rounded-xl cursor-pointer inline-flex items-center justify-center px-[0.875rem] py-2 relative transition-bg border-t"

after_class_name = "after:absolute after:inset-[1px] after:border-t after:rounded-[11px] after:border-white after:opacity-[0.22]"


def get_variant_class(variant: str) -> str:
    return (
        f"bg-gradient-to-b from-(--{variant}-9) to-(--{variant}-9) hover:to-(--{variant}-10) text-white"
        + " "
    )


variant_styles = {
    "primary": {
        "class_name": get_variant_class("violet"),
    },
    "success": {
        "class_name": get_variant_class("green"),
    },
    "destructive": {
        "class_name": get_variant_class("red"),
    },
    "muted": {
        "class_name": "bg-slate-3 hover:bg-slate-5 text-slate-9 border-t !border-slate-5",
    },
    "secondary": {
        "class_name": "bg-slate-4 hover:bg-slate-5 text-slate-10 !border-none",
    },
}


def button(
    text: str,
    variant: LiteralButtonVariant = "primary",
    onclick: Callable | None = None,
    style: dict | None = None,
    class_name: str = "",
    *children,
    **props,
) -> rx.Component:
    return rx.el.button(
        text,
        *children,
        onclick=onclick,
        style=style if style is not None else {},
        class_name=default_class_name
        + " "
        + variant_styles[variant]["class_name"]
        + " "
        + class_name,
        **props,
    )


def button_with_icon(
    text: str,
    icon: str,
    variant: LiteralButtonVariant = "primary",
    onclick: Callable | None = None,
    style: dict | None = None,
    class_name: str = "",
    *children,
    **props,
) -> rx.Component:
    return rx.el.button(
        get_icon(icon, class_name="[&>svg]:size-5"),
        text,
        *children,
        onclick=onclick,
        style=style if style is not None else {},
        class_name=default_class_name
        + " "
        + variant_styles[variant]["class_name"]
        + " "
        + class_name,
        **props,
    )