Button Group

Example:

---

Code example:

from htmy import ComponentType, html

from htmui.basecoat.button_group import button_group


def example() -> ComponentType:
    return html.div(
        html.h3("Horizontal button group:"),
        button_group(
            html.button("First", class_="btn"),
            html.button("Second", class_="btn"),
            html.button("Third", class_="btn"),
        ),
        html.h3("Vertical button group:"),
        html.div(
            button_group(
                html.button("First", class_="btn"),
                html.button("Second", class_="btn"),
                html.button("Third", class_="btn"),
                vertical=True,
            ),
            class_="flex justify-center",
        ),
        class_="flex flex-col gap-2",
    )

---

Component implementation:

For more details, see the BasecoatUI documentation.

from htmy import ComponentType, PropertyValue, html
from htmy.utils import join

__version__ = "0.1.0"
__framework__ = "BasecoatUI"
__framework_version__ = "0.3"
__framework_url__ = "https://basecoatui.com/components/button-group/"


def button_group(
    *children: ComponentType,
    class_: str = "",
    vertical: bool = False,
    **kwargs: PropertyValue,
) -> ComponentType:
    if "role" not in kwargs:
        kwargs["role"] = "group"

    if vertical:
        kwargs["data-orientation"] = "vertical"

    return html.div(*children, class_=join("button-group", class_), **kwargs)