Button

from starhtml import *
from starui import *

Div(
    Button("Small", size="sm"),
    Button("Default"),
    Button("Large", size="lg"),
    Button(Icon("lucide:chevron-right", cls="h-4 w-4"), variant="outline", size="icon"),
    cls="flex items-center gap-2"
)

from starhtml import *
from starui import *

Div(
    Button(Icon("lucide:mail", cls="mr-2 h-4 w-4"), "Login with Email"),
    Button(Icon("lucide:loader-2", cls="mr-2 h-4 w-4 animate-spin"), "Please wait", disabled=True),
    cls="flex gap-2"
)

from starhtml import *
from starui import *

Div(
    (count := Signal("count", 0)),
    Button("Click me!", data_on_click=count.add(1)),
    P("Clicked: ", Span(data_text=count, cls="font-bold text-blue-600")),
    cls="flex flex-col items-center gap-4"
)

from starhtml import *
from starui import *

Div(
    (expanded := Signal("expanded", False)),
    Button(
        data_text=expanded.if_("Hide Details", "Show Details"),
        data_on_click=expanded.toggle(),
        variant="outline"
    ),
    Div(
        Div(
            P("✨ Here are some additional details!", cls="font-medium"),
            P("This content smoothly fades in and out.", cls="text-sm text-muted-foreground"),
            data_show=expanded,
            cls="transition-all duration-300 ease-in-out"
        ),
        cls="mt-4 min-h-[60px] flex items-center justify-center"
    ),
    cls="w-full max-w-sm mx-auto text-center"
)

from starhtml import *
from starui import *

Div(
    (name := Signal("name", "")),
    Div(
        Label("Name:", cls="block text-sm font-medium mb-1"),
        Input(
            data_bind=name,
            type="text",
            placeholder="Enter your name",
            cls="w-full px-3 py-2 border rounded-md"
        ),
        cls="mb-4"
    ),
    Button(
        "Submit",
        data_attr_disabled=name.eq(""),
        data_on_click=js("alert('Hello ' + $name + '!')")
    ),
    P("Button is disabled until you enter a name", cls="text-sm text-gray-600 mt-2"),
    cls="w-full max-w-sm mx-auto"
)