Button

Displays a button.

use leptos::prelude::*;
use singlestage::button::*;

#[component]
pub fn ButtonExample() -> impl IntoView {
    view! {
        <div class="space-x-2">
            <Button>"Primary"</Button>
            <Button variant="secondary">"Secondary"</Button>
            <Button variant="outline">"Outline"</Button>
            <Button variant="ghost">"Ghost"</Button>
            <Button variant="link">"Link"</Button>
            <Button variant="destructive">"Destructive"</Button>
        </div>
    }
}

Button Sizes

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn ButtonSizesExample() -> impl IntoView {
    view! {
        <div class="space-x-2 sm:space-x-12">
            <Button size="small" variant="primary">
                "Small"
            </Button>
            <Button size="normal" variant="primary">
                "Normal"
            </Button>
            <Button size="large" variant="primary">
                "Large"
            </Button>
        </div>
    }
}

Button Icon

use icondata::LuMenu;
use leptos::prelude::*;
use singlestage::{icon, Button};

#[component]
pub fn ButtonIconExample() -> impl IntoView {
    view! {
        <div class="space-x-2 sm:space-x-12">
            <Button size="sm-icon" variant="primary">
                {icon!(LuMenu)}
            </Button>
            <Button size="icon" variant="primary">
                {icon!(LuMenu)}
            </Button>
            <Button size="lg-icon" variant="primary">
                {icon!(LuMenu)}
            </Button>
        </div>
    }
}

With Icon

use icondata::LuMenu;
use leptos::prelude::*;
use singlestage::{icon, Button};

#[component]
pub fn ButtonWithIconExample() -> impl IntoView {
    view! {
        <div class="space-x-2 sm:space-x-12">
            <Button size="small" variant="primary">
                {icon!(LuMenu)}
                "Menu"
            </Button>
            <Button variant="primary">{icon!(LuMenu)} "Menu"</Button>
            <Button size="large" variant="primary">
                {icon!(LuMenu)}
                "Menu"
            </Button>
        </div>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::button::*;

#[component]
pub fn ButtonAnatomy() -> impl IntoView {
    view! { <Button /> }
}

API Reference

Button

Creates a button.

Custom Attributes
Name	Type	Default	Description
button_type	String	"submit"	Renamed <button> `type` attribute to avoid name collisions.
size	String	""	Specify the size to render the button.
variant	String	"primary"	Specify the style of button to render.

Implements global and button attributes.