Angular Button Group Component Overview

    Angular Button Group component is used to organize buttons into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.

    Angular Button Group Example

    EXAMPLE

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    Getting Started with Ignite UI for Angular Button Group

    To get started with the Ignite UI for Angular Button Group component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

    ng add igniteui-angular
    cmd

    For a complete introduction to the Ignite UI for Angular, read the getting started topic.

    The next step is to import the IgxButtonGroupModule in your app.module.ts file.

    // app.module.ts
    
    ...
    import { IgxButtonGroupModule } from 'igniteui-angular';
    // import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        imports: [..., IgxButtonGroupModule],
        ...
    })
    export class AppModule {}
    typescript

    Alternatively, as of 16.0.0 you can import the IgxButtonGroupComponent as a standalone dependency, or use the IGX_BUTTON_GROUP_DIRECTIVES token to import the component and all of its supporting components and directives.

    // home.component.ts
    
    ...
    import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
    // import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
    
    @Component({
        selector: 'app-home',
        template: `
        <igx-buttongroup>
            <button igxButton>
                <igx-icon>format_align_left</igx-icon>
            </button>
            <button igxButton>
                <igx-icon>format_align_center</igx-icon>
            </button>
            <button igxButton>
                <igx-icon>format_align_right</igx-icon>
            </button>
            <button igxButton selected>
                <igx-icon>format_align_justify</igx-icon>
            </button>
        </igx-buttongroup>
        `,
        styleUrls: ['home.component.scss'],
        standalone: true,
        imports: [IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent]
        /* or imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] */
    })
    export class HomeComponent {}
    typescript

    Now that you have the Ignite UI for Angular Button Group module or directives imported, you can start with a basic configuration of the igx-buttongroup and its buttons.

    Using for Angular Button Group Component

    Add Button Group

    Use the igx-buttongroup selector to wrap your buttons and display them into a button group. If you want a button to be selected by default, use the selected property:

    <!-- sample.component.html -->
    <igx-buttongroup>
      <button igxButton>
        <igx-icon>format_align_left</igx-icon>
      </button>
      <button igxButton>
        <igx-icon>format_align_center</igx-icon>
      </button>
      <button igxButton>
        <igx-icon>format_align_right</igx-icon>
      </button>
      <button igxButton selected>
        <igx-icon>format_align_justify</igx-icon>
      </button>
    </igx-buttongroup>
    html

    Examples

    Alignment

    Use the alignment input property to set the orientation of the buttons in the button group.

    //sample.component.ts
    import { ButtonGroupAlignment } from 'igniteui-angular';
    // import { ButtonGroupAlignment } from '@infragistics/igniteui-angular'; for licensed package
    
    ...
    public alignment = ButtonGroupAlignment.vertical;
    ...
    typescript
    <!-- sample.component.html -->
    <igx-buttongroup [alignment]="alignment">
      <button igxButton>Sofia</button>
      <button igxButton>London</button>
      <button igxButton selected>New York</button>
      <button igxButton>Tokyo</button>
    </igx-buttongroup>
    html

    EXAMPLE

    Selection

    In order to configure the igx-buttongroup selection, you could use its selectionMode property. This property accepts the following three modes:

    • single - default selection mode of the button group. A single button can be selected/deselected by the user.
    • singleRequired - mimics a radio group behavior. Only one button can be selected and once initial selection is made, deselection is not possible through user interaction.
    • multi - multiple buttons in the group can be selected and deselected.

    The sample below demonstrates the exposed igx-buttongroup selection modes:

    EXAMPLE

    Size

    The --ig-size CSS custom property can be used to control the size of the button group.

    /* sample.component.scss */
    igx-buttongroup {
      --ig-size: var(--ig-size-small);
    }
    scss
    <!-- sample.component.html -->
    <igx-buttongroup></igx-buttongroup>
    html

    EXAMPLE

    Custom toggle buttons

    Use the values input property to set an array of customized buttons in the button group.

    // sample.component.ts
    
    interface IButton {
        ripple?: string;
        label?: string;
        disabled?: boolean;
        togglable?: boolean;
        selected?: boolean;
        color?: string;
        icon?: string;
    }
    
    class ToggleButton {
        private ripple: string;
        private label: string;
        private disabled: boolean;
        private togglable: boolean;
        private selected: boolean;
        private color: string;
        private icon: string;
    
        constructor(obj?: IButton) {
            this.ripple = obj.ripple || 'gray';
            this.label = obj.label;
            this.selected = obj.selected || false;
            this.togglable = obj.togglable || true;
            this.disabled = obj.disabled || false;
            this.color = obj.color;
            this.icon = obj.icon;
        }
    }
    ...
    public bordersButtons: ToggleButton[];
    
    public ngOnInit() {
        this.bordersButtons = [
            new ToggleButton({
                icon: 'border_top',
                selected: true
            }),
            new ToggleButton({
                icon: 'border_right',
                selected: false
            }),
            new ToggleButton({
                icon: 'border_bottom',
                selected: false
            }),
            new ToggleButton({
                icon: 'border_left',
                selected: false
            })
        ];
    }
    ...
    typescript
    <!-- sample.component.html -->
    <igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>
    html

    EXAMPLE

    App Builder | CTA Banner

    Styling

    To get started with styling the button group, we need to import the index file, where all the theme functions and component mixins live:

    @use "igniteui-angular/theming" as *;
    
    // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    scss

    Following the simplest approach, we create a new theme that extends the button-group-theme and accepts some of the parameters that style the button group's items in their different states.

    $custom-button-group: button-group-theme(
      $item-text-color: #fdfdfd,
      $item-background: #2f4d6a,
      $item-hover-text-color: #fdfdfd,
      $item-hover-background: #1f3347,
      $item-selected-text-color: #fdfdfd,
      $item-selected-background: #1f3347,
      $item-selected-hover-background: #1f3347,
      $disabled-text-color: gray,
      $disabled-background-color: lightgray,
    );
    scss

    As seen, the button-group-theme exposes some useful parameters for basic styling of its items. If you want to drill deeper and change some button specific parameters, you can create a new theme that extends the button-theme and scope it under the respective button group class.

    The last step is to include the component's theme.

    @include css-vars($custom-button-group);
    scss

    Demo

    EXAMPLE

    API References

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.