Button

Displays a button or a component that looks like a button. Supports 6 variants, 5 sizes, loading state, and icon slots.

Primitive: Pressable ARIA: role="button" Keyboard: Enter, Space

button_example.rs

use stratum_leptos::*;

#[component]
fn ButtonDemo() -> impl IntoView {
    view! {
        <Button variant=ButtonVariant::Default>"Default"</Button>
        <Button variant=ButtonVariant::Destructive>"Destructive"</Button>
        <Button variant=ButtonVariant::Outline>"Outline"</Button>
        <Button variant=ButtonVariant::Secondary>"Secondary"</Button>
        <Button variant=ButtonVariant::Ghost>"Ghost"</Button>
        <Button variant=ButtonVariant::Link>"Link"</Button>
    }
}

Installation

stratum add button

Or add via crate dependency:

Cargo.toml

[dependencies]
stratum = { version = "0.1", features = ["leptos"] }

Sizes

sizes.rs

<Button size=Size::Xs>"XS"</Button>
<Button size=Size::Sm>"SM"</Button>
<Button size=Size::Md>"MD"</Button>
<Button size=Size::Lg>"LG"</Button>
<Button size=Size::Xl>"XL"</Button>

Loading State

states.rs

<Button loading=true>"Saving..."</Button>
<Button disabled=true>"Disabled"</Button>

Props

Prop	Type	Default	Description
variant	ButtonVariant	Default	Visual style: Default, Destructive, Outline, Secondary, Ghost, Link
size	Size	Md	Size scale: Xs, Sm, Md, Lg, Xl
disabled	bool	false	Prevents interaction and dims the button
loading	bool	false	Shows a spinner and prevents interaction
class	Option<String>	None	Additional CSS classes (merged with defaults)
aria_label	Option<String>	None	Accessible label override
on_click	Option<Callback>	None	Click event handler

Accessibility

Renders with role="button" and proper aria-disabled when disabled.
Fully keyboard accessible: Enter and Space trigger the click action.
Focus visible indicator always shown for keyboard users.
Loading state sets aria-busy="true" and prevents interaction.

Source

Primitive: pressable.rs
Styled: button.rs