Angular Button Group Component

Button Group

Angular Button Group component allows to group a series of buttons and power them with TypeScript.

Available in Other JavaScript Frameworks

CoreUI Angular Button Group Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Usage

Basic example

Wrap a series of <button cButton> elements in <c-button-group> component.

import { Component } from '@angular/core';
import { ButtonDirective, ButtonGroupComponent } from '@coreui/angular';

@Component({
  selector: 'docs-button-group-example',
  templateUrl: './button-group-example.component.html',
  imports: [ButtonGroupComponent, ButtonDirective]
})
export class ButtonGroupExampleComponent {}

<c-button-group aria-label="Basic example" role="group">
  <button cButton color="primary">Left</button>
  <button cButton color="primary">Middle</button>
  <button cButton color="primary">Right</button>
</c-button-group>

Ensure the correct `role` and provide a label

For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper role attribute has to be provided. For button groups, this should be role="group", while toolbars should have a role="toolbar".

Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply aria-label, but options such as aria-labelledby can also be used.

import { Component } from '@angular/core';
import { ButtonDirective, ButtonGroupComponent } from '@coreui/angular';

@Component({
  selector: 'docs-button-group-example-2',
  templateUrl: './button-group-example-2.component.html',
  imports: [ButtonGroupComponent, ButtonDirective]
})
export class ButtonGroupExample2Component {}

<c-button-group aria-label="Basic example" role="group">
  <button cButton color="primary" [active]="true">Left</button>
  <button cButton color="primary">Middle</button>
  <button cButton color="primary">Right</button>
</c-button-group>

Mixed styles

import { Component } from '@angular/core';
import { ButtonDirective, ButtonGroupComponent } from '@coreui/angular';

@Component({
  selector: 'docs-button-group-mixed-styles',
  templateUrl: './button-group-mixed-styles.component.html',
  imports: [ButtonGroupComponent, ButtonDirective]
})
export class ButtonGroupMixedStylesComponent {}

<c-button-group aria-label="Basic mixed styles example" role="group">
  <button cButton color="danger">Left</button>
  <button cButton color="warning">Middle</button>
  <button cButton color="success">Right</button>
</c-button-group>

Outlined styles

import { Component } from '@angular/core';
import { ButtonDirective, ButtonGroupComponent } from '@coreui/angular';

@Component({
  selector: 'docs-button-group-outlined-styles',
  templateUrl: './button-group-outlined-styles.component.html',
  imports: [ButtonGroupComponent, ButtonDirective]
})
export class ButtonGroupOutlinedStylesComponent {}

<c-button-group aria-label="Basic outlined example" role="group">
  <button cButton color="primary" variant="outline">
    Left
  </button>
  <button cButton color="primary" variant="outline">
    Middle
  </button>
  <button cButton color="primary" variant="outline">
    Right
  </button>
</c-button-group>

Checkbox and radio button groups

Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

import { Component, inject } from '@angular/core';
import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
import { ButtonDirective, ButtonGroupComponent, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-button-group-checkbox-radio-groups',
  templateUrl: './button-group-checkbox-radio-groups.component.html',
  imports: [ReactiveFormsModule, ButtonGroupComponent, FormCheckLabelDirective, ButtonDirective]
})
export class ButtonGroupCheckboxRadioGroupsComponent {
  readonly formBuilder = inject(UntypedFormBuilder);

  formCheck1 = this.formBuilder.group({
    checkbox1: false,
    checkbox2: false,
    checkbox3: false
  });

  setCheckBoxValue(controlName: string) {
    const prevValue = this.formCheck1.get(controlName)?.value;
    const value = this.formCheck1.value;
    value[controlName] = !prevValue;
    this.formCheck1.setValue(value);
  }
}

<form [formGroup]="formCheck1">
  <c-button-group aria-label="Basic checkbox toggle button group" role="group">
    <input class="btn-check" formControlName="checkbox1" type="checkbox" />
    <label (click)="setCheckBoxValue('checkbox1')" cButton cFormCheckLabel
           variant="outline">Checkbox 1</label>

    <input class="btn-check" formControlName="checkbox2" type="checkbox" />
    <label (click)="setCheckBoxValue('checkbox2')" cButton cFormCheckLabel
           variant="outline">Checkbox 2</label>

    <input class="btn-check" formControlName="checkbox3" type="checkbox" />
    <label (click)="setCheckBoxValue('checkbox3')" cButton cFormCheckLabel variant="outline">Checkbox
      3</label>
  </c-button-group>
</form>

import { Component } from '@angular/core';
import { ReactiveFormsModule, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { ButtonDirective, ButtonGroupComponent, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-button-group-checkbox-radio-groups-2',
  templateUrl: './button-group-checkbox-radio-groups-2.component.html',
  imports: [ReactiveFormsModule, ButtonGroupComponent, FormCheckLabelDirective, ButtonDirective]
})
export class ButtonGroupCheckboxRadioGroups2Component {
  formRadio1 = new UntypedFormGroup({
    radio1: new UntypedFormControl('Radio1')
  });

  setRadioValue(value: string): void {
    this.formRadio1.setValue({ radio1: value });
  }
}

<form [formGroup]="formRadio1">
  <c-button-group aria-label="Basic radio toggle button group" role="group">
    <input class="btn-check" formControlName="radio1" type="radio" value="Radio1" />
    <label (click)="setRadioValue('Radio1')" cButton cFormCheckLabel
           variant="outline">Radio 1</label>

    <input class="btn-check" formControlName="radio1" type="radio" value="Radio2" />
    <label (click)="setRadioValue('Radio2')" cButton cFormCheckLabel
           variant="outline">Radio 2</label>

    <input class="btn-check" formControlName="radio1" type="radio" value="Radio3" />
    <label (click)="setRadioValue('Radio3')" cButton cFormCheckLabel variant="outline">Radio 3</label>
  </c-button-group>
</form>

Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.

import { Component } from '@angular/core';
import { ButtonDirective, ButtonGroupComponent, ButtonToolbarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-button-group-toolbar',
  templateUrl: './button-group-toolbar.component.html',
  imports: [ButtonToolbarComponent, ButtonGroupComponent, ButtonDirective]
})
export class ButtonGroupToolbarComponent {}

<c-button-toolbar aria-label="Toolbar with button groups" role="group">
  <c-button-group aria-label="First group" class="me-2" role="group">
    <button cButton color="primary">1</button>
    <button cButton color="primary">2</button>
    <button cButton color="primary">3</button>
    <button cButton color="primary">4</button>
  </c-button-group>
  <c-button-group aria-label="Second group" class="me-2" role="group">
    <button cButton color="secondary">5</button>
    <button cButton color="secondary">6</button>
    <button cButton color="secondary">7</button>
  </c-button-group>
  <c-button-group aria-label="Third group" class="me-2" role="group">
    <button cButton color="info">8</button>
  </c-button-group>
</c-button-toolbar>

Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  ButtonGroupComponent,
  ButtonToolbarComponent,
  FormControlDirective,
  InputGroupComponent,
  InputGroupTextDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-button-group-toolbar-2',
  templateUrl: './button-group-toolbar-2.component.html',
  imports: [
    ButtonToolbarComponent,
    ButtonGroupComponent,
    ButtonDirective,
    InputGroupComponent,
    InputGroupTextDirective,
    FormControlDirective
  ]
})
export class ButtonGroupToolbar2Component {}

<c-button-toolbar aria-label="Toolbar with button groups" class="mb-3" role="group">
  <c-button-group aria-label="First group" class="me-2" role="group">
    <button cButton color="secondary" variant="outline">
      1
    </button>
    <button cButton color="secondary" variant="outline">
      2
    </button>
    <button cButton color="secondary" variant="outline">
      3
    </button>
    <button cButton color="secondary" variant="outline">
      4
    </button>
  </c-button-group>
  <c-input-group>
    <span cInputGroupText>&#64;</span>
    <input aria-describedby="btnGroupAddon"
           aria-label="Input group example"
           cFormControl
           placeholder="Input group example"
    />
  </c-input-group>
</c-button-toolbar>
<c-button-toolbar
  aria-label="Toolbar with button groups"
  class="justify-content-between"
  role="group"
>
  <c-button-group aria-label="First group" class="me-2" role="group">
    <button cButton color="secondary" variant="outline">
      1
    </button>
    <button cButton color="secondary" variant="outline">
      2
    </button>
    <button cButton color="secondary" variant="outline">
      3
    </button>
    <button cButton color="secondary" variant="outline">
      4
    </button>
  </c-button-group>
  <c-input-group>
    <span cInputGroupText>&#64;</span>
    <input aria-describedby="btnGroupAddon"
           aria-label="Input group example"
           cFormControl
           placeholder="Input group example"
    />
  </c-input-group>
</c-button-toolbar>

Sizing

Control the size of the entire button group by setting the size property on the <c-button-group> component instead of adding size to each button individually.

import { Component } from '@angular/core';
import { ButtonDirective, ButtonGroupComponent } from '@coreui/angular';

@Component({
  selector: 'docs-button-group-sizing',
  templateUrl: './button-group-sizing.component.html',
  imports: [ButtonGroupComponent, ButtonDirective]
})
export class ButtonGroupSizingComponent {}

<c-button-group aria-label="Large button group" class="m-1" role="group" size="lg">
  <button cButton color="dark" variant="outline">
    Left
  </button>
  <button cButton color="dark" variant="outline">
    Middle
  </button>
  <button cButton color="dark" variant="outline">
    Right
  </button>
</c-button-group>
<br />
<c-button-group aria-label="Default button group" class="m-1" role="group">
  <button cButton color="dark" variant="outline">
    Left
  </button>
  <button cButton color="dark" variant="outline">
    Middle
  </button>
  <button cButton color="dark" variant="outline">
    Right
  </button>
</c-button-group>
<br />
<c-button-group aria-label="Small button group" class="m-1" role="group" size="sm">
  <button cButton color="dark" variant="outline">
    Left
  </button>
  <button cButton color="dark" variant="outline">
    Middle
  </button>
  <button cButton color="dark" variant="outline">
    Right
  </button>
</c-button-group>

Nesting

Put a <c-dropdown> with variant="btn-group" when you need dropdown menus combined with a series of buttons.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  ButtonDirective,
  ButtonGroupComponent,
  DropdownComponent,
  DropdownDividerDirective,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-button-group-nesting',
  templateUrl: './button-group-nesting.component.html',
  imports: [
    ButtonGroupComponent,
    ButtonDirective,
    DropdownComponent,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    RouterLink,
    DropdownDividerDirective
  ]
})
export class ButtonGroupNestingComponent {}

<c-button-group aria-label="Button group with nested dropdown" role="group">
  <button cButton color="primary">1</button>
  <button cButton color="primary">2</button>
  <c-dropdown variant="btn-group">
    <button cButton cDropdownToggle>
      Dropdown
    </button>
    <ul cDropdownMenu>
      <li><a cDropdownItem routerLink>Action</a></li>
      <li><a cDropdownItem routerLink>Another action</a></li>
      <li><a cDropdownItem routerLink>Something else here</a></li>
      <li cDropdownDivider></li>
      <li><a cDropdownItem routerLink>Separated link</a></li>
    </ul>
  </c-dropdown>
</c-button-group>

Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

import { Component } from '@angular/core';
import { ButtonDirective, ButtonGroupComponent } from '@coreui/angular';

@Component({
  selector: 'docs-button-group-nesting-2',
  templateUrl: './button-group-nesting-2.component.html',
  imports: [ButtonGroupComponent, ButtonDirective]
})
export class ButtonGroupNesting2Component {}

<c-button-group [vertical]="true" aria-label="Vertical button group" role="group">
  <button cButton color="dark">Button</button>
  <button cButton color="dark">Button</button>
  <button cButton color="dark">Button</button>
  <button cButton color="dark">Button</button>
  <button cButton color="dark">Button</button>
  <button cButton color="dark">Button</button>
  <button cButton color="dark">Button</button>
</c-button-group>

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  ButtonDirective,
  ButtonGroupComponent,
  DropdownComponent,
  DropdownDividerDirective,
  DropdownItemDirective,
  DropdownMenuDirective,
  DropdownToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-button-group-nesting-3',
  templateUrl: './button-group-nesting-3.component.html',
  imports: [
    ButtonGroupComponent,
    ButtonDirective,
    DropdownComponent,
    DropdownToggleDirective,
    DropdownMenuDirective,
    DropdownItemDirective,
    RouterLink,
    DropdownDividerDirective
  ]
})
export class ButtonGroupNesting3Component {}

<c-button-group [vertical]="true" aria-label="Vertical button group" role="group">
  <button cButton color="primary">Button</button>
  <button cButton color="primary">Button</button>
  <c-dropdown variant="btn-group" direction="dropend">
    <button cButton cDropdownToggle>
      Dropdown
    </button>
    <ul cDropdownMenu>
      <li><a cDropdownItem routerLink>Action</a></li>
      <li><a cDropdownItem routerLink>Another action</a></li>
      <li><a cDropdownItem routerLink>Something else here</a></li>
      <li cDropdownDivider></li>
      <li><a cDropdownItem routerLink>Separated link</a></li>
    </ul>
  </c-dropdown>
  <button cButton color="primary">Button</button>
  <button cButton color="primary">Button</button>
  <c-dropdown variant="btn-group" direction="dropend">
    <button cButton cDropdownToggle>
      Dropdown
    </button>
    <ul cDropdownMenu>
      <li><a cDropdownItem routerLink>Action</a></li>
      <li><a cDropdownItem routerLink>Another action</a></li>
      <li><a cDropdownItem routerLink>Something else here</a></li>
      <li cDropdownDivider></li>
      <li><a cDropdownItem routerLink>Separated link</a></li>
    </ul>
  </c-dropdown>
  <c-dropdown variant="btn-group" direction="dropend">
    <button cButton cDropdownToggle>
      Dropdown
    </button>
    <ul cDropdownMenu>
      <li><a cDropdownItem routerLink>Action</a></li>
      <li><a cDropdownItem routerLink>Another action</a></li>
      <li><a cDropdownItem routerLink>Something else here</a></li>
      <li cDropdownDivider></li>
      <li><a cDropdownItem routerLink>Separated link</a></li>
    </ul>
  </c-dropdown>
  <c-dropdown variant="btn-group">
    <button cButton cDropdownToggle>
      Dropdown
    </button>
    <ul cDropdownMenu>
      <li><a cDropdownItem routerLink>Action</a></li>
      <li><a cDropdownItem routerLink>Another action</a></li>
      <li><a cDropdownItem routerLink>Something else here</a></li>
      <li cDropdownDivider></li>
      <li><a cDropdownItem routerLink>Separated link</a></li>
    </ul>
  </c-dropdown>
</c-button-group>

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ButtonDirective, ButtonGroupComponent, FormCheckLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-button-group-nesting-4',
  templateUrl: './button-group-nesting-4.component.html',
  imports: [ReactiveFormsModule, ButtonGroupComponent, FormCheckLabelDirective, ButtonDirective]
})
export class ButtonGroupNesting4Component {
  formRadio1 = new FormGroup({
    radio1: new FormControl('Radio1')
  });

  setRadioValue(value: string): void {
    this.formRadio1.setValue({ radio1: value });
  }
}

<form [formGroup]="formRadio1">
  <c-button-group [vertical]="true" aria-label="Vertical button group" role="group">
    <input class="btn-check" formControlName="radio1" type="radio" value="Radio1" />
    <label (click)="setRadioValue('Radio1')" cButton cFormCheckLabel color="danger"
           variant="outline">Radio 1</label>

    <input class="btn-check" formControlName="radio1" type="radio" value="Radio2" />
    <label (click)="setRadioValue('Radio2')" cButton cFormCheckLabel color="danger"
           variant="outline">Radio 2</label>

    <input class="btn-check" formControlName="radio1" type="radio" value="Radio3" />
    <label (click)="setRadioValue('Radio3')" cButton cFormCheckLabel color="danger" variant="outline">Radio
      3</label>
  </c-button-group>
</form>

API

ButtonGroup Module

import { ButtonGroupModule } from '@coreui/angular';

@NgModule({
  imports: [ButtonGroupModule,]
})
export class AppModule(){}

c-button-group

component

jsx

import { ButtonGroupComponent } from '@coreui/angular'

Property	Default	Type
role	`'group'`	`string`
Default role attr for ButtonGroup
size	-	`''`, `'sm'`, `'lg'`
Size the component small or large.
vertical	`false`	`boolean`
Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.