Button Group

A container that groups related buttons together with consistent styling.

❯buridan add button group

Component Guide

Use the following to build the Button_group component.

from components.ui.button_group import button_group

button_group.root(
    button(),
    button_group.separator(),
)

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/separator.py

components/ui/button_group.py

Accessibility

button_group.root sets role="group".
Use Tab to navigate between the buttons in the group.
Use aria-label or aria-labelledby to label the button group.

Examples

Orientation

Set the orientation prop to change the layout.

Props used: orientation on button_group.root.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.button import button
from components.ui.button_group import button_group


def button_group_orientation() -> rx.Component:
    return button_group.root(
        button(
            hi("Add01Icon"),
            variant="outline",
            size="icon",
        ),
        button(
            hi("MinusSignIcon"),
            variant="outline",
            size="icon",
        ),
        orientation="vertical",
        aria_label="Media controls",
        class_name="h-fit",
    )

Size

Control the size of buttons using the size prop on individual buttons.

Props used: size on button.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.button import button
from components.ui.button_group import button_group


def button_group_size() -> rx.Component:
    return rx.el.div(
        button_group.root(
            button("Small", variant="outline", size="sm"),
            button("Button", variant="outline", size="sm"),
            button("Group", variant="outline", size="sm"),
            button(hi("Add01Icon"), variant="outline", size="icon-sm"),
        ),
        button_group.root(
            button("Default", variant="outline"),
            button("Button", variant="outline"),
            button("Group", variant="outline"),
            button(hi("Add01Icon"), variant="outline", size="icon"),
        ),
        button_group.root(
            button("Large", variant="outline", size="lg"),
            button("Button", variant="outline", size="lg"),
            button("Group", variant="outline", size="lg"),
            button(hi("Add01Icon"), variant="outline", size="icon-lg"),
        ),
        class_name="flex flex-col items-start gap-8",
    )

Separator

button_group.separator visually divides buttons within a group. outline-variant buttons don't need one (they already have a border) — other variants benefit from it for visual hierarchy.

Props used: none required beyond default button_group.separator.

import reflex as rx

from components.ui.button import button
from components.ui.button_group import button_group


def button_group_separator() -> rx.Component:
    return button_group.root(
        button("Copy", variant="secondary", size="sm"),
        button_group.separator(),
        button("Paste", variant="secondary", size="sm"),
    )

Split

Two buttons separated by a button_group.separator.

Props used: none required beyond default button_group.separator.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.button import button
from components.ui.button_group import button_group


def button_group_split() -> rx.Component:
    return button_group.root(
        button("Button", variant="secondary"),
        button_group.separator(),
        button(
            hi("Add01Icon"),
            variant="secondary",
            size="icon",
        ),
    )

Input

Wrap an input with buttons on either side.

Props used: none required — standard button_group.root composition.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.button import button
from components.ui.button_group import button_group
from components.ui.input import input


def button_group_input() -> rx.Component:
    return button_group.root(
        input(placeholder="Search..."),
        button(
            hi("Search01Icon"),
            variant="outline",
            aria_label="Search",
        ),
    )

A split button group with a menu as the second segment.

Props used: see the Menu docs for menu-specific props.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.button import button
from components.ui.button_group import button_group
from components.ui.menu import menu


def button_group_dropdown() -> rx.Component:
    return button_group.root(
        button("Follow", variant="outline"),
        menu.root(
            menu.trigger(
                button(
                    hi("ArrowDown01Icon"),
                    variant="outline",
                    class_name="pl-2!",
                ),
            ),
            menu.content(
                menu.item("Mute Conversation"),
                menu.item("Mark as Read"),
                menu.item("Report Conversation"),
                menu.item("Block User"),
                menu.item("Share Conversation"),
                menu.item("Copy Conversation"),
            ),
            menu.separator(),
            menu.content(
                menu.item("Delete Conversation", variant="destructive"),
            ),
        ),
    )

Select

Pair with a select component.

Props used: see the Select docs for select-specific props.

Error: Reference Target 'button_group_select' not found

API Reference

button_group.root

button_group.root(
    button("Copy", variant="outline"),
    button("Paste", variant="outline"),
)

Prop	Type	Default
`orientation`	`Literal["horizontal", "vertical"]`	`"horizontal"`
`class_name`	`str`	`""`

button_group.separator

button_group.root(
    button("Bold", variant="ghost"),
    button_group.separator(),
    button("Italic", variant="ghost"),
)

Prop	Type	Default
`orientation`	`Literal["horizontal", "vertical"]`	`"vertical"`
`class_name`	`str`	`""`

button_group.text

Accepts *children, so any component (including interactive ones) can be rendered as label content inside a group.

button_group.text("Filter by")

Prop	Type	Default
`class_name`	`str`	`""`