Button
Displays a button.
use leptos::prelude::*; use singlestage::*; #[component] pub fn ButtonExample() -> impl IntoView { view! { <div class="flex flex-wrap items-center gap-2 md:flex-row"> <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 class="hidden sm:flex"> <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.
| Name | Type | Default | Description |
|---|---|---|---|
| button_type | String | "submit" | Renamed <button> `type` attribute to avoid name collisions. |
| invalid | bool | false | Toggle whether or not the input is disabled. |
| size | String | "" | Specify the size to render the button. |
| variant | String | "primary" | Specify the style of button to render. |