Button Group

Groups related buttons together with consistent styling.

Orientation

Button groups can be horizontal (default) or vertical.

Horizontal

Vertical

Separator

Buttons with variant outline do not need a separator since they have a border. For other variants, a separator is recommended.

Outline (no separator needed)

Solid with separator

Split Button

Combine a primary action with a dropdown trigger.

Nested

Button groups can be nested to create toolbar-like layouts with spacing between groups.

Input Integration

Combine inputs and buttons in a single group.

Search

URL input with text labels

https://
.com

With Text

ButtonGroupText displays non-interactive labels within a button group.

Page

Size Variants

Buttons within a group can use different sizes.

Small

Default

Large

Icon

Open Markdown
FreeButton Group

Grouped adjacent controls.

Install with the Proa CLI
proa ui add button_group

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
recipe.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: MIT OR Apache-2.0

//! Button Group recipe — typed root appearance and named slot classes.
//!
//! The root resolves orientation once. Descendant slots read their static
//! classes directly from [`BUTTON_GROUP_RECIPE`], and the separator responds
//! to the root's semantic `data-orientation` through a named Tailwind group.

use proa_core::shared::attr_value::AttrValue;
use proa_core::{DataLoader, WebContext, WriteBuf, WriteError};

mod base {
    use crate::tw_join;

    pub const BUTTON_GROUP_ROOT: &str = tw_join!(
        "group/button-group",
        "flex",
        "w-fit",
        "items-stretch",
        "[&>*]:focus-visible:z-10",
        "[&>*]:focus-visible:relative",

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal