Mosaic Logo

Mosaic Tiles Demo

Button

A clickable button component with multiple variants and states.

Examples

Button Variants

Available button styles: Primary, Secondary, and Outline

View Code
use leptos::prelude::*;
use mosaic_tiles::button::{Button, ButtonVariant};

#[component]
pub fn VariantsExample() -> impl IntoView {
    view! {
        <div class="flex gap-4 items-center">
            <Button variant=ButtonVariant::Primary>"Primary Button"</Button>
            <Button variant=ButtonVariant::Secondary>"Secondary Button"</Button>
            <Button variant=ButtonVariant::Outline>"Outline Button"</Button>
        </div>
    }
}

Button Types

HTML button types: Button, Submit, and Reset

View Code
use leptos::prelude::*;
use mosaic_tiles::button::{Button, ButtonType};

#[component]
pub fn TypesExample() -> impl IntoView {
    view! {
        <div class="flex gap-4 items-center">
            <Button button_type=ButtonType::Button>"Button"</Button>
            <Button button_type=ButtonType::Submit>"Submit"</Button>
            <Button button_type=ButtonType::Reset>"Reset"</Button>
        </div>
    }
}

Disabled State

Buttons in disabled state

View Code
use leptos::prelude::*;
use mosaic_tiles::button::{Button, ButtonVariant};

#[component]
pub fn DisabledExample() -> impl IntoView {
    view! {
        <div class="flex gap-4 items-center">
            <Button disabled=true variant=ButtonVariant::Primary>
                "Disabled Primary"
            </Button>
            <Button disabled=true variant=ButtonVariant::Secondary>
                "Disabled Secondary"
            </Button>
        </div>
    }
}

Interactive Example

Buttons with click handlers and reactive state

Counter: 0Button disabled: false
View Code
use leptos::prelude::*;
use mosaic_tiles::button::{Button, ButtonVariant};

#[component]
pub fn InteractiveExample() -> impl IntoView {
    let (count, set_count) = signal(0);
    let (disabled, set_disabled) = signal(false);

    view! {
        <div class="space-y-4">
            <div class="flex gap-4 items-center">
                <Button
                    disabled=disabled
                    on:click=move |_| {
                        if !disabled.get() {
                            set_count.update(|n| *n += 1)
                        }
                    }
                >
                    "Increment: "
                    {count}
                </Button>
                <Button variant=ButtonVariant::Secondary on:click=move |_| set_count.set(0)>
                    "Reset"
                </Button>
            </div>

            <div class="flex gap-4 items-center">
                <span class="text-gray-700">"Counter: " {count}</span>
                <span class="text-gray-700">
                    "Button disabled: " {move || disabled.get().to_string()}
                </span>
            </div>

            <Button
                variant=ButtonVariant::Secondary
                on:click=move |_| set_disabled.update(|b| *b = !*b)
            >
                {move || if disabled.get() { "Enable" } else { "Disable" }}
                " increment button"
            </Button>
        </div>
    }
}

Buttons with Icons

Buttons combined with icon components

Icon + Text

Icon Only

View Code
use leptos::prelude::*;
use mosaic_tiles::button::{Button, ButtonVariant};
use mosaic_tiles::icon::*;

#[component]
pub fn WithIconsExample() -> impl IntoView {
    view! {
        <div class="space-y-6">
            <div>
                <h4 class="text-base font-semibold mb-2">"Icon + Text"</h4>
                <div class="flex gap-4 items-center">
                    <Button variant=ButtonVariant::Primary>
                        <Icon icon=IconSearch class="w-4 h-4 inline mr-2" />
                        "Search"
                    </Button>
                    <Button variant=ButtonVariant::Secondary>
                        <Icon icon=Mail class="w-4 h-4 inline mr-2" />
                        "Send Email"
                    </Button>
                    <Button variant=ButtonVariant::Primary>
                        "Visit Docs" <Icon icon=LinkExternal class="w-4 h-4 inline ml-2" />
                    </Button>
                </div>
            </div>

            <div>
                <h4 class="text-base font-semibold mb-2">"Icon Only"</h4>
                <div class="flex gap-4 items-center">
                    <Button variant=ButtonVariant::Secondary>
                        <Icon icon=CopyPaste class="w-4 h-4" />
                    </Button>
                    <Button variant=ButtonVariant::Secondary>
                        <Icon icon=Info class="w-4 h-4" />
                    </Button>
                    <Button variant=ButtonVariant::Primary>
                        <Icon icon=IconChevronRight class="w-4 h-4" />
                    </Button>
                </div>
            </div>
        </div>
    }
}

Anatomy

use leptos::prelude::*;
use mosaic_tiles::button::*;

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

API Reference

Button

Main button component for user interactions.

Implements standard HTML button attributes.

AttributeTypeDefaultDescription
variantButtonVariantPrimaryVisual style variant: Primary, Secondary, or Outline
button_typeButtonTypeButtonHTML button type: Button, Submit, or Reset
disabledboolfalseWhether the button is disabled
childrenOption<Children>NoneButton content (text, icons, etc.)
on_clickOption<Callback<MouseEvent>>NoneClick event handler