PrimitiveAvailable

Button Group

Related actions grouped under one outline and accessible name.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/button-group.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import { useState } from 'react';
import { ButtonGroup } from '@/components/ui/button-group';
import { Button } from '@/components/ui/button';

export default function Demo() {
  const [alignment, setAlignment] = useState('left');
  return (
    <ButtonGroup aria-label="Text alignment">
      <Button
        variant={alignment === 'left' ? 'secondary' : 'outline'}
        aria-pressed={alignment === 'left'}
        onClick={() => setAlignment('left')}
      >
        Left
      </Button>
      <Button
        variant={alignment === 'center' ? 'secondary' : 'outline'}
        aria-pressed={alignment === 'center'}
        onClick={() => setAlignment('center')}
      >
        Center
      </Button>
      <Button
        variant={alignment === 'right' ? 'secondary' : 'outline'}
        aria-pressed={alignment === 'right'}
        onClick={() => setAlignment('right')}
      >
        Right
      </Button>
    </ButtonGroup>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Primary, secondary, accent, outline and destructive: 4px shadow; hover moves 2px with 2px shadow; pressed moves 4px with no shadow.
Ghost changes surface on hover; link adds an underline. Disabled prevents activation. Loading also blocks the action and announces aria-busy.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
orientation	horizontal / vertical	horizontal	Direction of the group.

Accessibility

Rules that should remain intact when adapting the component to a product.

Name the group with aria-label or a legend. Use aria-pressed for toggle buttons.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.