Button

Displays a button.

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

#[component]
pub fn ButtonExample() -> impl IntoView {
    view! {
        <div class="flex flex-wrap gap-2">
            <Button variant="outline">Button</Button>
            <Button variant="outline" size="icon" aria_label="Submit">
                {icon!(icondata::LuArrowUp)}
            </Button>
        </div>
    }
}

Button Size

Use the size prop to change the size of the button.

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

#[component]
pub fn ButtonSizeExample() -> impl IntoView {
    view! {
        <div class="flex flex-col items-start gap-8 sm:flex-row">
            <div class="flex items-start gap-2">
                <Button size="xs" variant="outline">
                    "Extra Small"
                </Button>
                <Button size="icon-xs" aria_label="Submit" variant="outline">
                    {icon!(icondata::LuArrowUpRight)}
                </Button>
            </div>
            <div class="flex items-start gap-2">
                <Button size="sm" variant="outline">
                    "Small"
                </Button>
                <Button size="icon-sm" aria_label="Submit" variant="outline">
                    {icon!(icondata::LuArrowUpRight)}
                </Button>
            </div>
            <div class="flex items-start gap-2">
                <Button variant="outline">Default</Button>
                <Button size="icon" aria_label="Submit" variant="outline">
                    {icon!(icondata::LuArrowUpRight)}
                </Button>
            </div>
            <div class="flex items-start gap-2">
                <Button variant="outline" size="lg">
                    "Large"
                </Button>
                <Button size="icon-lg" aria_label="Submit" variant="outline">
                    {icon!(icondata::LuArrowUpRight)}
                </Button>
            </div>
        </div>
    }
}

Default

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

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

Outline

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

#[component]
pub fn ButtonOutlineExample() -> impl IntoView {
    view! { <Button variant="outline">"Outline"</Button> }
}

Secondary

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

#[component]
pub fn ButtonSecondaryExample() -> impl IntoView {
    view! { <Button variant="secondary">"Secondary"</Button> }
}

Ghost

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

#[component]
pub fn ButtonGhostExample() -> impl IntoView {
    view! { <Button variant="ghost">"Ghost"</Button> }
}

Destructive

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

#[component]
pub fn ButtonDestructiveExample() -> impl IntoView {
    view! { <Button variant="destructive">"Destructive"</Button> }
}

Link

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

#[component]
pub fn ButtonLinkExample() -> impl IntoView {
    view! { <Button variant="link">"Link"</Button> }
}

Icon

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

#[component]
pub fn ButtonIconExample() -> impl IntoView {
    view! {
        <Button variant="outline" size="icon">
            {icon!(icondata::LuCircleFadingArrowUp)}
        </Button>
    }
}

With Icon

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

#[component]
pub fn ButtonWithIconExample() -> impl IntoView {
    view! {
        <Button variant="outline" size="sm">
            {icon!(icondata::LuGitBranch)}
            <span>"New Branch"</span>
        </Button>
    }
}

Rounded

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

#[component]
pub fn ButtonRoundedExample() -> impl IntoView {
    view! {
        <Button variant="outline" size="icon" class="rounded-full">
            {icon!(icondata::LuArrowUp)}
        </Button>
    }
}

Spinner

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

#[component]
pub fn ButtonSpinnerExample() -> impl IntoView {
    view! {
        <div class="flex gap-2">
            <Button variant="outline" disabled=true>
                <Spinner />
                "Generating"
            </Button>
            <Button variant="secondary" disabled=true>
                "Downloading"
                <Spinner />
            </Button>
        </div>
    }
}

Button Group

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

#[component]
pub fn ButtonButtonGroupExample() -> impl IntoView {
    let label = RwSignal::new("personal".to_string());

    view! {
        <ButtonGroup>
            <ButtonGroup>
                <Button variant="outline" size="icon" aria_label="Go Back">
                    {icon!(icondata::LuArrowLeft)}
                </Button>
            </ButtonGroup>
            <ButtonGroup>
                <Button variant="outline">"Archive"</Button>
                <Button variant="outline">"Report"</Button>
            </ButtonGroup>
            <ButtonGroup>
                <Button variant="outline">"Snooze"</Button>
                <DropdownMenu>
                    <DropdownMenuTrigger>
                        <Button variant="outline" size="icon" aria_label="More Options">
                            {icon!(icondata::FiMoreHorizontal)}
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" class="w-40">
                        <DropdownMenuGroup>
                            <DropdownMenuItem>
                                {icon!(icondata::LuMailCheck)} "Mark as Read"
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                                {icon!(icondata::LuArchive)} "Archive"
                            </DropdownMenuItem>
                        </DropdownMenuGroup>
                        <Separator />
                        <DropdownMenuGroup>
                            <DropdownMenuItem>{icon!(icondata::LuClock)} "Snooze"</DropdownMenuItem>
                            <DropdownMenuItem>
                                {icon!(icondata::LuCalendarPlus)} "Add to Calendar"
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                                {icon!(icondata::LuListFilter)} "Add to List"
                            </DropdownMenuItem>
                            <DropdownMenuSub>
                                <DropdownMenuSubTrigger>
                                    {icon!(icondata::LuTag)} "Label As..."
                                </DropdownMenuSubTrigger>
                                <DropdownMenuSubContent>
                                    <DropdownMenuRadioGroup value=label>
                                        <DropdownMenuRadioItem value="personal">
                                            "Personal"
                                        </DropdownMenuRadioItem>
                                        <DropdownMenuRadioItem value="work">
                                            "Work"
                                        </DropdownMenuRadioItem>
                                        <DropdownMenuRadioItem value="other">
                                            "Other"
                                        </DropdownMenuRadioItem>
                                    </DropdownMenuRadioGroup>
                                </DropdownMenuSubContent>
                            </DropdownMenuSub>
                        </DropdownMenuGroup>
                        <Separator />
                        <DropdownMenuGroup>
                            <DropdownMenuItem variant="destructive">
                                {icon!(icondata::LuTrash2)} "Trash"
                            </DropdownMenuItem>
                        </DropdownMenuGroup>
                    </DropdownMenuContent>
                </DropdownMenu>
            </ButtonGroup>
        </ButtonGroup>
    }
}

Link

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

#[component]
pub fn ButtonLinkAsButtonExample() -> impl IntoView {
    view! {
        <Link render_as="button" href="/login">
            "Log in"
        </Link>
    }
}

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
as_child	bool	false	This component will render without styling.
button_type	String	"submit"	Renamed button `type` attribute to avoid name collisions.
dismiss	bool	false	Toggle whether clicking this button dismisses its parent popover.
invalid	bool	false	Toggle whether or not the input is disabled.
size	String	""	Specify the size to render the button. Accepted values: "small" \| "large" \| "icon" \| "sm-icon" \| "lg-icon"
variant	String	"primary"	Specify the style of button to render. Accepted values: "primary" \| "secondary" \| "outline" \| "ghost" \| "link" \| "destructive"

Implements global and button attributes.

Getting Started

Components

Button

Button Size

Default

Outline

Secondary

Ghost

Destructive

Link

Icon

With Icon

Rounded

Spinner

Button Group

Link

Anatomy

API Reference

Button