Button

A button in one of six variants and three sizes.

Result

button.rs

use hypersig::html::{div, p, span};
use hypersig::style::pattern::{stack, wrap};
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::{ButtonSize, ButtonVariant, button, icon_button};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct Buttons {
    clicks: i32,
}

pub fn page() -> Page<Buttons> {
    let clicks = Buttons::clicks();
    let count = clicks.set(clicks + 1);
    let variants = [
        (ButtonVariant::Default, "Default"),
        (ButtonVariant::Secondary, "Secondary"),
        (ButtonVariant::Outline, "Outline"),
        (ButtonVariant::Ghost, "Ghost"),
        (ButtonVariant::Destructive, "Destructive"),
        (ButtonVariant::Link, "Link"),
    ];
    Page::new(
        "Buttons",
        Buttons { clicks: 0 },
    )
    .child(
        div()
            .css(stack(rem(1)))
            .child(div().css(wrap(rem(0.5))).children(variants.into_iter().map(
                |(variant, text)| {
                    button(variant, ButtonSize::Default)
                        .on_click(count.clone())
                        .text(text)
                },
            )))
            .child(
                div()
                    .css(wrap(rem(0.5)))
                    .child(
                        button(ButtonVariant::Outline, ButtonSize::Sm).text("Small"),
                    )
                    .child(
                        button(ButtonVariant::Outline, ButtonSize::Lg).text("Large"),
                    )
                    .child(
                        button(ButtonVariant::Outline, ButtonSize::Default)
                            .attr("disabled", "")
                            .text("Disabled"),
                    )
                    .child(
                        icon_button(
                            ButtonVariant::Outline,
                            "Add",
                        )
                        .text("+"),
                    ),
            )
            .child(
                p().text("Clicked ")
                .child(span().bind_text(clicks.to_text()))
                .text(" times"),
            ),
    )
}

Accessibility

Each is a native <button>, so Enter and Space press it and a screen reader announces it as a button. button has type="button", so it does not submit the form around it, and submit_button is the one that does. Disable either with El::disabled, which dims it.

An icon button has no text, so icon_button takes the label that names it as an argument. button_style gives the same look to an element that is not a button, such as a link.

Key	What it does
Enter, Space	Presses the button.

API

Item	Summary
`button`	A `<button type="button">` of `variant` and `size`.
`submit_button`	A `<button type="submit">` of `variant` and `size`, which submits the form around it.
`icon_button`	A square button that shows only an icon, named by `label`.
`button_style`	The style of a button of `variant` and `size`, for an element that is not a `<button>`.
`ButtonVariant`	The look of a button.
`ButtonSize`	The height and padding of a button.