#Button Group

A row or column of connected buttons that reads as one toolbar, where each button runs its own action.

#Installation

npx @blotch/dolan add button-group

import {
  UiButtonGroup,
  UiButtonGroupItem,
} from '../components/ui/button-group';

Button Group imports class-variance-authority (see Installation).

#Usage

import { Component } from '@angular/core';
import {
  UiButtonGroup,
  UiButtonGroupItem,
} from '../components/ui/button-group';

@Component({
  selector: 'app-root',
  imports: [UiButtonGroup, UiButtonGroupItem],
  template: `
    <ui-button-group>
      <ui-button-group-item (pressed)="copy()">Copy</ui-button-group-item>
      <ui-button-group-item (pressed)="paste()">Paste</ui-button-group-item>
    </ui-button-group>
  `,
})
export class App {
  protected copy(): void {}
  protected paste(): void {}
}

• The group sets the look of every item. Each item emits its own pressed.
• Nothing stays selected. For buttons that stay on, use a toggle group from Toggle.
• The group hugs its items. Add class="w-full" to stretch it.

#Variants

<ui-button-group variant="default">…</ui-button-group>
<ui-button-group variant="outline">…</ui-button-group>

default fills the items with the secondary color. outline uses the background color inside a border.

#Sizes

<ui-button-group size="sm">…</ui-button-group>
<ui-button-group size="default">…</ui-button-group>
<ui-button-group size="lg">…</ui-button-group>

#Vertical

<ui-button-group orientation="vertical" variant="outline">
  <ui-button-group-item (pressed)="openProfile()">Profile</ui-button-group-item>
  <ui-button-group-item (pressed)="openSettings()">
    Settings
  </ui-button-group-item>
</ui-button-group>

#Disabled

<ui-button-group [disabled]="true">…</ui-button-group>

<ui-button-group>
  <ui-button-group-item (pressed)="undo()">Undo</ui-button-group-item>
  <ui-button-group-item [disabled]="true">Redo</ui-button-group-item>
</ui-button-group>

Disable the whole group, or one item. A disabled item dims and doesn't emit pressed.

#API

#UiButtonGroup

No outputs.

#UiButtonGroupItem

The file also exports buttonGroupItemVariants and the ButtonGroupVariant, ButtonGroupSize and ButtonGroupOrientation types.

#Related

• Button: a single button
• Toggle: buttons that stay pressed