ButtonGroup

The ButtonGroup component visually groups related buttons by removing inner borders and radius, relying on the container's overflow-hidden and rounded-md for clean outer corners. It supports horizontal and vertical orientations and includes a ButtonGroupText component for static label segments.

Preview

Installation

npx novaui-cli add button-group

Import

import { ButtonGroup, ButtonGroupText } from 'novaui-components'

Basic Usage

Group related buttons together with a shared visual style:

import { ButtonGroup, ButtonGroupText } from 'novaui-components'
import { Button } from 'novaui-components'

export function BasicButtonGroup() {
  return (
    <ButtonGroup>
      <Button variant="outline">Previous</Button>
      <Button variant="outline">Next</Button>
    </ButtonGroup>
  )
}

Orientation

Horizontal

The default orientation, grouping buttons side by side:

<ButtonGroup orientation="horizontal">
  <Button variant="outline">Day</Button>
  <Button variant="outline">Week</Button>
  <Button variant="outline">Month</Button>
</ButtonGroup>

Vertical

Stack buttons vertically with shared borders:

<ButtonGroup orientation="vertical">
  <Button variant="outline">Top</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Bottom</Button>
</ButtonGroup>

With Text Segment

Use ButtonGroupText for a non-interactive label segment within the group:

<ButtonGroup>
  <ButtonGroupText>Page</ButtonGroupText>
  <Button variant="outline">1</Button>
  <Button variant="outline">2</Button>
  <Button variant="outline">3</Button>
</ButtonGroup>

Multiple Variants

Combine different button variants within a group:

<ButtonGroup>
  <Button variant="outline">Cancel</Button>
  <Button>Save</Button>
</ButtonGroup>

Props API

ButtonGroupProps

Extends React.ComponentPropsWithoutRef<typeof View> and VariantProps<typeof buttonGroupVariants>:

ButtonGroupTextProps

Extends React.ComponentPropsWithoutRef<typeof View>:

The container applies flex-row items-stretch overflow-hidden rounded-md and clones children with rounded-none and appropriate border removal (border-l-0 for horizontal, border-t-0 for vertical).

Best Practices

1. Use for related actions: Group buttons that perform related operations (pagination, view modes, undo/redo)
2. Keep groups small: 2-4 buttons per group works best for scannability
3. Consistent variants: Use the same button variant within a group for visual consistency (except for primary action highlighting)
4. Use ButtonGroupText sparingly: Label segments work well for context like "Page" or "Sort by"

Related Components

• Use ToggleGroup when buttons represent toggleable states
• Use individual Button components for standalone actions
• Pair with Separator for additional visual grouping in toolbars