The rx.button_group component allows you to create a group of buttons that are visually connected and styled together. This is commonly used to group related actions or options in your application's user interface.

Here's an example of how to use the rx.button_group component to create a simple group of buttons:

rx.button_group(
    rx.button("Option 1"),
    rx.button("Option 2"),
    rx.button("Option 3"),
)

In this example, a button group is created with three buttons. The buttons are visually connected, and there is a default spacing of 2 pixels between them.

You can customize the appearance and behavior of the rx.button_group component by adjusting its properties. For instance, you can set is_attached prop to True to make the buttons appear flushed together:

rx.button_group(
    rx.button("Option 1"),
    rx.button("Option 2"),
    rx.button("Option 3"),
    is_attached=True,
)

In this example, the is_attached property is set to True, resulting in the buttons having a seamless appearance.

Just like the button component, you can customize the visual style of your buttons using the variant prop. This will apply to all buttons in the group.

rx.button_group(
    rx.button("Option 1"),
    rx.button("Option 2"),
    rx.button("Option 3"),
    variant="ghost",
)

In this example, the variant prop is set to ghost, applying the variant style to all buttons in the group.

Similarly, you can adjust the size of buttons within a button group using the size prop. This prop allows you to choose from different size options, affecting all buttons within the group.

rx.button_group(
    rx.button("Large Button", size="lg"),
    rx.button("Medium Button", size="md"),
    rx.button("Small Button", size="sm"),
)

In this example, the size prop is used to set the size of all buttons within the group, with options such as "lg" (large), "md" (medium), and "sm" (small).

You can also disable all the buttons within a button group by setting the is_disabled prop to True:

rx.button_group(
    rx.button("Option 1"),
    rx.button("Option 2"),
    rx.button("Option 3"),
    is_disabled=True,
)

In this case, all the buttons within the group will be disabled and unclickable.

The spacing prop allows you to control the gap between buttons within the group. Here's an example of setting a custom spacing of 8 pixels:

rx.button_group(
    rx.button("Option 1"),
    rx.button("Option 2"),
    rx.button("Option 3"),
    spacing=8,
)

By setting spacing to 8, the buttons will have a larger gap between them.

A group of buttons.