Button Group

The igx-buttongroup component in Ignite UI for Angular provides a button group functionality to developers with horizontal/vertical alignment and single/multiple selection along with toggling. The igx-buttongroup component makes use of the igxButton directive.

Button Group Demo

Dependencies

The Button Group is exported as an NgModule, thus you will need to import the IgxButtonGroupModule inside your AppModule:

// app.module.ts

import { IgxButtonGroupModule } from 'igniteui-angular';

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

Usage

Use igx-buttongroup to organize buttons into an Angular styled button group.

//sample.component.ts
import { ButtonGroupAlignment } from 'igniteui-angular';
...
public alignment = ButtonGroupAlignment.vertical;
...
 public ngOnInit() {
    this.cities = [
      new Button({
          label: "Sofia"
      }),
      new Button({
          label: "London"
      }),
      new Button({
          label: "New York",
          selected: true
      }),
      new Button({
          label: "Tokyo"
      })
  ];
  }
...
<igx-buttongroup [multiSelection]="false" [values]="cities" [alignment]="alignment">
</igx-buttongroup>

While you can use Exclusive or Multiple selection you can also set a button to be togglable and disabled. In the following example the leftmost button is selected, but not togglable. The rightmost is disabled.

//sample.component.ts
...
public ngOnInit() {
    this.alignOptions = [
      new Button({
          icon: "format_align_left",
          selected: true,
          togglable: false
      }),
      new Button({
          icon: "format_align_center",
      }),
      new Button({
          icon: "format_align_right",
          selected: true
      }),
      new Button({
          disabled: true,
          icon: "format_align_justify",
      })
  ];
  }
...
<igx-buttongroup [multiSelection]="true" [values]="alignOptions">
</igx-buttongroup>

API References

Additional Resources

Our community is active and always welcoming to new ideas.

View page on GitHub