ButtonGroup

A group of buttons visually connected together. Use regular Button components as children.

Examples

Basic Usage

Button groups can be oriented horizontally or vertically

Horizontal (Default)

Vertical

View Code

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

#[component]
pub fn BasicExample() -> impl IntoView {
    view! {
        <div class="space-y-4">
            <div class="flex gap-8">
                <div>
                    <p class="text-sm text-gray-600 mb-2">"Horizontal (Default)"</p>
                    <ButtonGroup>
                        <Button variant=ButtonVariant::Outline>"Left"</Button>
                        <Button variant=ButtonVariant::Outline>"Center"</Button>
                        <Button variant=ButtonVariant::Outline>"Right"</Button>
                    </ButtonGroup>
                </div>

                <div>
                    <p class="text-sm text-gray-600 mb-2">"Vertical"</p>
                    <ButtonGroup orientation=ButtonGroupOrientation::Vertical>
                        <Button variant=ButtonVariant::Outline>"Top"</Button>
                        <Button variant=ButtonVariant::Outline>"Middle"</Button>
                        <Button variant=ButtonVariant::Outline>"Bottom"</Button>
                    </ButtonGroup>
                </div>
            </div>
        </div>
    }
}

Size Variants

Button groups in small, medium, and large sizes

Small

Medium (Default)

Large

View Code

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

#[component]
pub fn SizesExample() -> impl IntoView {
    view! {
        <div class="space-y-4">
            <div>
                <p class="text-sm text-gray-600 mb-2">"Small"</p>
                <ButtonGroup size=ButtonGroupSize::Small>
                    <Button variant=ButtonVariant::Outline>"Small"</Button>
                    <Button variant=ButtonVariant::Outline>"Button"</Button>
                    <Button variant=ButtonVariant::Outline>"Group"</Button>
                </ButtonGroup>
            </div>

            <div>
                <p class="text-sm text-gray-600 mb-2">"Medium (Default)"</p>
                <ButtonGroup size=ButtonGroupSize::Medium>
                    <Button variant=ButtonVariant::Outline>"Medium"</Button>
                    <Button variant=ButtonVariant::Outline>"Button"</Button>
                    <Button variant=ButtonVariant::Outline>"Group"</Button>
                </ButtonGroup>
            </div>

            <div>
                <p class="text-sm text-gray-600 mb-2">"Large"</p>
                <ButtonGroup size=ButtonGroupSize::Large>
                    <Button variant=ButtonVariant::Outline>"Large"</Button>
                    <Button variant=ButtonVariant::Outline>"Button"</Button>
                    <Button variant=ButtonVariant::Outline>"Group"</Button>
                </ButtonGroup>
            </div>
        </div>
    }
}

Interactive Example

Interactive button group with click handlers

Count: 0

View Code

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

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

    view! {
        <div class="space-y-4">
            <p class="text-sm text-gray-600">"Count: " {move || count.get()}</p>

            <ButtonGroup>
                <Button
                    variant=ButtonVariant::Outline
                    on:click=move |_| set_count.update(|n| *n -= 1)
                >
                    "-"
                </Button>
                <Button variant=ButtonVariant::Outline on:click=move |_| set_count.set(0)>
                    "Reset"
                </Button>
                <Button
                    variant=ButtonVariant::Outline
                    on:click=move |_| set_count.update(|n| *n += 1)
                >
                    "+"
                </Button>
            </ButtonGroup>
        </div>
    }
}

Disabled State

Button group with disabled items

View Code

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

#[component]
pub fn DisabledExample() -> impl IntoView {
    view! {
        <div class="space-y-4">
            <ButtonGroup>
                <Button variant=ButtonVariant::Outline>"Active"</Button>
                <Button variant=ButtonVariant::Outline disabled=true>
                    "Disabled"
                </Button>
                <Button variant=ButtonVariant::Outline>"Active"</Button>
            </ButtonGroup>
        </div>
    }
}

With Icons

Button groups containing icons

View Code

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

#[component]
pub fn WithIconsExample() -> impl IntoView {
    view! {
        <div class="space-y-4">
            <div>
                <ButtonGroup>
                    <Button variant=ButtonVariant::Outline>
                        <Icon icon=IconChevronLeft class="w-4 h-4" />
                    </Button>
                    <Button variant=ButtonVariant::Outline>
                        <Icon icon=IconChevronRight class="w-4 h-4" />
                    </Button>
                </ButtonGroup>

            </div>
            <div>
                <ButtonGroup>
                    <Button variant=ButtonVariant::Outline>
                        <Icon icon=IconChevronLeft class="w-4 h-4 inline mr-2" />
                        "Prev"
                    </Button>
                    <Button variant=ButtonVariant::Outline>
                        "Next" <Icon icon=IconChevronRight class="w-4 h-4 inline ml-2" />
                    </Button>
                </ButtonGroup>

            </div>
        </div>
    }
}

Anatomy

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

#[component]
pub fn ButtonGroupAnatomy() -> impl IntoView {
    view! {
        <ButtonGroup>
            <Button>"Option 1"</Button>
            <Button>"Option 2"</Button>
            <Button>"Option 3"</Button>
        </ButtonGroup>
    }
}

API Reference

ButtonGroup

Container component that visually groups Button components together.

Automatically applies connected styling to Button children. Use regular Button components as children.

Attribute	Type	Default	Description
size	ButtonGroupSize	Medium	Size of the button group: Small, Medium, or Large
orientation	ButtonGroupOrientation	Horizontal	Orientation of the button group: Horizontal or Vertical
children	Option<Children>	None	Button components to display in the group

Mosaic Tiles Demo

ButtonGroup

Examples

Basic Usage

Size Variants

Interactive Example

Disabled State

With Icons

Anatomy

API Reference

ButtonGroup