thaw/demo_markdown/docs/button/mod.md

Button

view! {
    <Space>
        <Button variant=ButtonVariant::Primary>"Primary"</Button>
        <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
        <Button variant=ButtonVariant::Text>"Text"</Button>
        <Button variant=ButtonVariant::Link>"Link"</Button>
    </Space>
}

Color

view! {
    <Space>
        <Button color=ButtonColor::Primary>"Primary Color"</Button>
        <Button color=ButtonColor::Success>"Success Color"</Button>
        <Button color=ButtonColor::Warning>"Warning Color"</Button>
        <Button color=ButtonColor::Error>"Error Color"</Button>
    </Space>
}

Icon

view! {
    <Space>
        <Button color=ButtonColor::Error icon=icondata::AiCloseOutlined>
            "Error Color Icon"
        </Button>
        <Button
            color=ButtonColor::Error
            icon=icondata::AiCloseOutlined
            round=true
        />
        <Button
            color=ButtonColor::Error
            icon=icondata::AiCloseOutlined
            circle=true
        />
    </Space>
}

Loading

let loading = create_rw_signal(false);
let on_click = move |_| {
    loading.set(true);
    set_timeout(
        move || {
            loading.set(false);
        },
        std::time::Duration::new(2, 0),
    );
};

view! {
    <Space>
        <Button loading on_click icon=icondata::AiCloseOutlined>
            "Click Me"
        </Button>
        <Button loading on_click>
            "Click Me"
        </Button>
    </Space>
}

Disabled

view! {
    <Space>
        <Button variant=ButtonVariant::Primary disabled=true>
            "Primary"
        </Button>
        <Button variant=ButtonVariant::Outlined disabled=true>
            "Outlined"
        </Button>
        <Button variant=ButtonVariant::Text disabled=true>
            "Text"
        </Button>
        <Button variant=ButtonVariant::Link disabled=true>
            "Link"
        </Button>
    </Space>
}

Size

view! {
    <Space>
        <Button size=ButtonSize::Tiny>"Primary"</Button>
        <Button size=ButtonSize::Small>"Primary"</Button>
        <Button size=ButtonSize::Medium>"Primary"</Button>
        <Button size=ButtonSize::Large>"Primary"</Button>
    </Space>
}

Group

view! {
    <Space>
        <ButtonGroup>
            <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
            <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
            <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
        </ButtonGroup>
        <ButtonGroup vertical=true>
            <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
            <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
            <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
        </ButtonGroup>
    </Space>
}

Button Props

Name	Type	Default	Description
class	OptionalProp<MaybeSignal<String>>	Default::default()	Additional classes for the button element.
style	Option<MaybeSignal<String>>	Default::default()	Button's style.
variant	MaybeSignal<ButtonVariant>	ButtonVariant::Primary	Button's variant.
color	MaybeSignal<ButtonColor>	ButtonColor::Primary	Button's color.
round	MaybeSignal<bool>	false	Whether the button shows rounded corners.
circle	MaybeSignal<bool>	false	Whether the button is round.
icon	Option<Icon>	None	The icon of the button.
loading	MaybeSignal<bool>	false	Whether the button shows the loading status.
disabled	MaybeSignal<bool>	false	Whether the button is disabled.
size	MaybeSignal<ButtonSize>	ButtonSize::Medium	Button size.
on_click	Option<Callback<ev::MouseEvent>>	None	Listen for button click events.
children	Option<Children>		Button's content.

ButtonGroup props

Name	Type	Default	Description
vertical	bool	false	Directions of buttons in the group.
children	Children		ButtonGroup's content.