Acronis UIKit
Legacy (shadcn-uikit)Components

ButtonGroup

Groups related buttons together with consistent spacing and styling.

Usage

import { ButtonGroup, ButtonGroupItem } from '@acronis-platform/shadcn-uikit';

Basic

A simple group of related buttons.

Preview
View source
import { Button, ButtonGroup } from '@acronis-platform/shadcn-uikit/react';

export function ButtonGroupBasic() {
  return (
    <ButtonGroup>
      <Button variant="outline">First</Button>
      <Button variant="outline">Second</Button>
      <Button variant="outline">Third</Button>
    </ButtonGroup>
  );
}

Sizes

Button groups support different sizes.

Small

Default

Large

Preview
View source
import { Button, ButtonGroup } from '@acronis-platform/shadcn-uikit/react';

export function ButtonGroupSizes() {
  return (
    <div className="space-y-4">
      <div>
        <p className="text-xs text-muted-foreground mb-2">Small</p>
        <ButtonGroup>
          <Button variant="outline" size="sm">
            Small
          </Button>
          <Button variant="outline" size="sm">
            Buttons
          </Button>
          <Button variant="outline" size="sm">
            Group
          </Button>
        </ButtonGroup>
      </div>
      <div>
        <p className="text-xs text-muted-foreground mb-2">Default</p>
        <ButtonGroup>
          <Button variant="outline">Default</Button>
          <Button variant="outline">Buttons</Button>
          <Button variant="outline">Group</Button>
        </ButtonGroup>
      </div>
      <div>
        <p className="text-xs text-muted-foreground mb-2">Large</p>
        <ButtonGroup>
          <Button variant="outline" size="lg">
            Large
          </Button>
          <Button variant="outline" size="lg">
            Buttons
          </Button>
          <Button variant="outline" size="lg">
            Group
          </Button>
        </ButtonGroup>
      </div>
    </div>
  );
}

Day selector

A toggle-style button group for selecting days.

Preview
View source
import * as React from 'react';
import { ButtonGroup } from '@acronis-platform/shadcn-uikit/react';

export function ButtonGroupDaySelector() {
  const [selectedDay, setSelectedDay] = React.useState<string>('Mon');
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

  return (
    <ButtonGroup className="border border-border/30 rounded bg-background p-1 h-12">
      {days.map((day) => (
        <button
          key={day}
          onClick={() => setSelectedDay(day)}
          className={`px-2 text-sm font-semibold leading-6 transition-colors rounded ${
            selectedDay === day
              ? 'bg-primary text-primary-foreground'
              : 'text-primary hover:bg-accent/5'
          }`}
        >
          {day}
        </button>
      ))}
    </ButtonGroup>
  );
}

Day selector (small)

A compact day selector variant.

Preview
View source
import * as React from 'react';
import { ButtonGroup } from '@acronis-platform/shadcn-uikit/react';

export function ButtonGroupDaySelectorSmall() {
  const [selectedDay, setSelectedDay] = React.useState<string>('Mon');
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

  return (
    <ButtonGroup className="border border-border/30 rounded bg-background p-1 h-8">
      {days.map((day) => (
        <button
          key={day}
          onClick={() => setSelectedDay(day)}
          className={`px-2 text-sm font-semibold leading-6 transition-colors rounded ${
            selectedDay === day
              ? 'bg-primary text-primary-foreground'
              : 'text-primary hover:bg-accent/5'
          }`}
        >
          {day}
        </button>
      ))}
    </ButtonGroup>
  );
}

With icons

Button groups can contain icon-only buttons.

Preview
View source
import { Button, ButtonGroup } from '@acronis-platform/shadcn-uikit/react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from '../icons/missing-icons';
export function ButtonGroupWithIcons() {
  return (
    <ButtonGroup>
      <Button variant="outline" size="icon">
        <BoldIcon className="h-4 w-4" />
      </Button>
      <Button variant="outline" size="icon">
        <ItalicIcon className="h-4 w-4" />
      </Button>
      <Button variant="outline" size="icon">
        <UnderlineIcon className="h-4 w-4" />
      </Button>
    </ButtonGroup>
  );
}

Text alignment

A toolbar-style group for text alignment options.

Preview
View source
import * as React from 'react';
import { Button, ButtonGroup } from '@acronis-platform/shadcn-uikit/react';
import {
  AlignCenterIcon,
  AlignLeftIcon,
  AlignRightIcon,
} from '../icons/missing-icons';
export function ButtonGroupTextAlignment() {
  const [alignment, setAlignment] = React.useState<string>('left');

  return (
    <ButtonGroup>
      <Button
        variant={alignment === 'left' ? 'default' : 'outline'}
        size="icon"
        onClick={() => setAlignment('left')}
      >
        <AlignLeftIcon className="h-4 w-4" />
      </Button>
      <Button
        variant={alignment === 'center' ? 'default' : 'outline'}
        size="icon"
        onClick={() => setAlignment('center')}
      >
        <AlignCenterIcon className="h-4 w-4" />
      </Button>
      <Button
        variant={alignment === 'right' ? 'default' : 'outline'}
        size="icon"
        onClick={() => setAlignment('right')}
      >
        <AlignRightIcon className="h-4 w-4" />
      </Button>
    </ButtonGroup>
  );
}

Text formatting

A formatting toolbar with toggle buttons.

Preview
View source
import * as React from 'react';
import { Button, ButtonGroup } from '@acronis-platform/shadcn-uikit/react';
import { BoldIcon, ItalicIcon, UnderlineIcon } from '../icons/missing-icons';
export function ButtonGroupTextFormatting() {
  const [textFormat, setTextFormat] = React.useState<string[]>([]);

  const toggleFormat = (format: string) => {
    setTextFormat((prev) =>
      prev.includes(format)
        ? prev.filter((f) => f !== format)
        : [...prev, format]
    );
  };

  return (
    <ButtonGroup>
      <Button
        variant={textFormat.includes('bold') ? 'default' : 'outline'}
        size="icon"
        onClick={() => toggleFormat('bold')}
      >
        <BoldIcon className="h-4 w-4" />
      </Button>
      <Button
        variant={textFormat.includes('italic') ? 'default' : 'outline'}
        size="icon"
        onClick={() => toggleFormat('italic')}
      >
        <ItalicIcon className="h-4 w-4" />
      </Button>
      <Button
        variant={textFormat.includes('underline') ? 'default' : 'outline'}
        size="icon"
        onClick={() => toggleFormat('underline')}
      >
        <UnderlineIcon className="h-4 w-4" />
      </Button>
    </ButtonGroup>
  );
}

With separators

Button groups with visual separators between items.

Preview
View source
import {
  Button,
  ButtonGroup,
  ButtonGroupSeparator,
} from '@acronis-platform/shadcn-uikit/react';
import { ClipboardIcon, CopyIcon } from '@acronis-platform/shadcn-uikit';
import { RedoIcon, ScissorsIcon, UndoIcon } from '../icons/missing-icons';
export function ButtonGroupWithSeparators() {
  return (
    <ButtonGroup>
      <Button variant="outline" size="icon">
        <UndoIcon className="h-4 w-4" />
      </Button>
      <Button variant="outline" size="icon">
        <RedoIcon className="h-4 w-4" />
      </Button>
      <ButtonGroupSeparator />
      <Button variant="outline" size="icon">
        <CopyIcon className="h-4 w-4" />
      </Button>
      <Button variant="outline" size="icon">
        <ScissorsIcon className="h-4 w-4" />
      </Button>
      <Button variant="outline" size="icon">
        <ClipboardIcon className="h-4 w-4" />
      </Button>
    </ButtonGroup>
  );
}

With text labels

Button groups with text labels alongside icons.

Preview
View source
import { Button, ButtonGroup } from '@acronis-platform/shadcn-uikit/react';
import { ListIcon } from '@acronis-platform/shadcn-uikit';
import { ListOrderedIcon } from '../icons/missing-icons';
export function ButtonGroupWithTextLabels() {
  return (
    <ButtonGroup>
      <Button variant="outline">
        <ListIcon className="mr-2 h-4 w-4" />
        Bullet List
      </Button>
      <Button variant="outline">
        <ListOrderedIcon className="mr-2 h-4 w-4" />
        Numbered List
      </Button>
    </ButtonGroup>
  );
}

Vertical

A vertically stacked button group.

Preview
View source
import { Button, ButtonGroup } from '@acronis-platform/shadcn-uikit/react';

export function ButtonGroupVertical() {
  return (
    <ButtonGroup orientation="vertical">
      <Button variant="outline">Top</Button>
      <Button variant="outline">Middle</Button>
      <Button variant="outline">Bottom</Button>
    </ButtonGroup>
  );
}

Media controls

A media player control bar built with button groups.

Preview
View source
import { Button, ButtonGroup } from '@acronis-platform/shadcn-uikit/react';
import { PauseIcon, PlayIcon } from '@acronis-platform/shadcn-uikit';
import { SkipBackIcon, SkipForwardIcon } from '../icons/missing-icons';
export function ButtonGroupMediaControls() {
  return (
    <ButtonGroup>
      <Button variant="outline" size="icon">
        <SkipBackIcon className="h-4 w-4" />
      </Button>
      <Button variant="outline" size="icon">
        <PlayIcon className="h-4 w-4" />
      </Button>
      <Button variant="outline" size="icon">
        <PauseIcon className="h-4 w-4" />
      </Button>
      <Button variant="outline" size="icon">
        <SkipForwardIcon className="h-4 w-4" />
      </Button>
    </ButtonGroup>
  );
}

Zoom controls

Zoom in/out controls built with button groups.

100%
Preview
View source
import * as React from 'react';
import {
  Button,
  ButtonGroup,
  ButtonGroupText,
} from '@acronis-platform/shadcn-uikit/react';
import { ZoomInIcon, ZoomOutIcon } from '@acronis-platform/shadcn-uikit';
export function ButtonGroupZoomControls() {
  const [zoom, setZoom] = React.useState(100);

  return (
    <ButtonGroup>
      <Button
        variant="outline"
        size="icon"
        onClick={() => setZoom(Math.max(25, zoom - 25))}
      >
        <ZoomOutIcon className="h-4 w-4" />
      </Button>
      <ButtonGroupText className="min-w-[80px] justify-center">
        {zoom}%
      </ButtonGroupText>
      <Button
        variant="outline"
        size="icon"
        onClick={() => setZoom(Math.min(200, zoom + 25))}
      >
        <ZoomInIcon className="h-4 w-4" />
      </Button>
    </ButtonGroup>
  );
}

Complex toolbar

A full toolbar combining multiple button groups.

Preview
View source
import * as React from 'react';
import { Button, ButtonGroup } from '@acronis-platform/shadcn-uikit/react';
import { ListIcon } from '@acronis-platform/shadcn-uikit';
import {
  AlignCenterIcon,
  AlignLeftIcon,
  AlignRightIcon,
  BoldIcon,
  ItalicIcon,
  ListOrderedIcon,
  RedoIcon,
  UnderlineIcon,
  UndoIcon,
} from '../icons/missing-icons';
export function ButtonGroupComplexToolbar() {
  const [alignment, setAlignment] = React.useState<string>('left');
  const [textFormat, setTextFormat] = React.useState<string[]>([]);

  const toggleFormat = (format: string) => {
    setTextFormat((prev) =>
      prev.includes(format)
        ? prev.filter((f) => f !== format)
        : [...prev, format]
    );
  };

  return (
    <div className="flex flex-wrap gap-4">
      <ButtonGroup>
        <Button variant="outline" size="icon">
          <UndoIcon className="h-4 w-4" />
        </Button>
        <Button variant="outline" size="icon">
          <RedoIcon className="h-4 w-4" />
        </Button>
      </ButtonGroup>

      <ButtonGroup>
        <Button
          variant={textFormat.includes('bold') ? 'default' : 'outline'}
          size="icon"
          onClick={() => toggleFormat('bold')}
        >
          <BoldIcon className="h-4 w-4" />
        </Button>
        <Button
          variant={textFormat.includes('italic') ? 'default' : 'outline'}
          size="icon"
          onClick={() => toggleFormat('italic')}
        >
          <ItalicIcon className="h-4 w-4" />
        </Button>
        <Button
          variant={textFormat.includes('underline') ? 'default' : 'outline'}
          size="icon"
          onClick={() => toggleFormat('underline')}
        >
          <UnderlineIcon className="h-4 w-4" />
        </Button>
      </ButtonGroup>

      <ButtonGroup>
        <Button
          variant={alignment === 'left' ? 'default' : 'outline'}
          size="icon"
          onClick={() => setAlignment('left')}
        >
          <AlignLeftIcon className="h-4 w-4" />
        </Button>
        <Button
          variant={alignment === 'center' ? 'default' : 'outline'}
          size="icon"
          onClick={() => setAlignment('center')}
        >
          <AlignCenterIcon className="h-4 w-4" />
        </Button>
        <Button
          variant={alignment === 'right' ? 'default' : 'outline'}
          size="icon"
          onClick={() => setAlignment('right')}
        >
          <AlignRightIcon className="h-4 w-4" />
        </Button>
      </ButtonGroup>

      <ButtonGroup>
        <Button variant="outline">
          <ListIcon className="mr-2 h-4 w-4" />
          Bullet
        </Button>
        <Button variant="outline">
          <ListOrderedIcon className="mr-2 h-4 w-4" />
          Numbered
        </Button>
      </ButtonGroup>
    </div>
  );
}

API Reference

ButtonGroup

Prop

Type

ButtonGroupText accepts an asChild prop. ButtonGroupSeparator extends the Separator component props.

Edit on GitHub

Button

Triggers an action or event.

Checkbox

A control that allows the user to toggle between checked and unchecked states.

On this page

UsageBasicSizesDay selectorDay selector (small)With iconsText alignmentText formattingWith separatorsWith text labelsVerticalMedia controlsZoom controlsComplex toolbarAPI ReferenceButtonGroup