ButtonGroup

Wrapper that visually joins adjacent Buttons into a single segmented control (shared edges, squared inner corners, overlapping borders).

When to use

Use ButtonGroup for a small, fixed set of related buttons that should read as one connected control (e.g. a segmented toggle or a split action). It only lays out and joins its children — the buttons keep their own props (variant, size, onClick, …).

• For a horizontal list where extra actions collapse into an overflow "more" menu, use ButtonList instead.
• Children are expected to be Button (or IconButton, which renders a Button); the joining CSS targets .uxf-button descendants.

There is no @uxf/form twin — this is a layout wrapper, not a form field.

Usage

import { Button } from "@uxf/ui/button";
import { ButtonGroup } from "@uxf/ui/button-group";
import { Icon } from "@uxf/ui/icon";

<ButtonGroup>
    <Button onClick={onClick}>First</Button>
    <Button onClick={onClick}>Second</Button>
    <Button isIconButton onClick={onClick}>
        <Icon name="check" size={16} />
    </Button>
</ButtonGroup>;

Props

The exported ButtonGroupProps type covers className and style; children is accepted via PropsWithChildren.

Requirements

Import the component stylesheet once in your global CSS, together with the Button stylesheet its children rely on:

@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/button-group.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.