Button Group — codefast/ui

Examples

Input

Wrap an Input component with buttons.

Input Group

Wrap an InputGroup component to create complex input layouts.

Nested

Nest <ButtonGroup> components to create button groups with spacing.

Orientation

Set the orientation prop to change the button group layout.

RTL

Right-to-left layout support for languages such as Arabic and Hebrew.

Translations are AI-generated for demonstration and may be imperfect.

Select

Pair with a Select component.

Separator

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

Size

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

Split

Create a split button group by adding two buttons separated by a ButtonGroupSeparator.

Anatomy

How the parts compose. Copy this skeleton and fill in the slots.

import { ButtonGroup } from "@codefast/ui/button-group";

<ButtonGroup orientation="horizontal">
  <Button variant="outline">A</Button>
  <Button variant="outline">B</Button>
</ButtonGroup>

API reference

Props for each part of the component. All native element props are also forwarded.

ButtonGroup

Joins adjacent buttons into one visual control.

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Lay the buttons in a row or a column.

ButtonGroupText / ButtonGroupSeparator

Prop	Type	Default	Description
children	ReactNode	—	A non-button label, or a divider between segments.

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

Grouping is visual — each button keeps its own role and label.
For one-of-many or multi-select toggles, use a Toggle Group instead.
Keep related actions together; don’t mix unrelated buttons.

Guidelines

Conventions that keep usage consistent across an app.

Do

Group closely-related actions (copy/paste, prev/next).
Add a ButtonGroupText label for split controls.

Don’t

Don’t put toggle state here — use Toggle Group.
Don’t cram unrelated actions into one group.