Button Group

    The Ignite UI for 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

    Usage

    First Steps

    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';
    // import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        imports: [
            ...
            IgxButtonGroupModule,
            ...
        ]
    })
    export class AppModule {}
    

    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]="true">
            <igx-icon>format_align_justify</igx-icon>
        </button>
    </igx-buttongroup>
    

    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;
    ...
    
    <!-- sample.component.html -->
    <igx-buttongroup [alignment]="alignment">
        <button igxButton>Sofia</button>
        <button igxButton>London</button>
        <button igxButton [selected]="true">New York</button>
        <button igxButton>Tokyo</button>
    </igx-buttongroup>
    

    Multiple selection

    Use the the multiSelection input property to enable the multiple selection in the button group.

    <!-- sample.component.html -->
    <igx-buttongroup [multiSelection]="true">
        <button igxButton>
            <igx-icon>format_bold</igx-icon>
        </button>
        <button igxButton>
            <igx-icon>format_italic</igx-icon>
        </button>
        <button igxButton>
            <igx-icon>format_underlined</igx-icon>
        </button>
    </igx-buttongroup>
    

    Display Density

    The displayDensity input property is used to control the display density of a button group. This will set the style for the buttons in the group to cosy, compact or comfortable (default value) accordingly.

    Note

    The display density of a button within a button group is not changed if it is explicitly specified.

    // sample.component.ts
    ...
    public displayDensity = 'comfortable';
    public displayDensities;
    
    public ngOnInit() {
        this.displayDensities = [
            { label: 'compact', selected: this.displayDensity === 'compact', togglable: true },
            { label: 'cosy', selected: this.displayDensity === 'cosy', togglable: true },
            { label: 'comfortable', selected: this.displayDensity === 'comfortable', togglable: true }
        ];
    }
    
    public selectDensity(event) {
        this.displayDensity = this.displayDensities[event.index].label;
    }
    ...
    
    <!-- sample.component.html -->
    <igx-buttongroup [values]="displayDensities" 
                     [displayDensity]="displayDensity"
                     (selected)="selectDensity($event)">
    </igx-buttongroup>
    

    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
            })
        ];
    }
    ...
    
    <!-- sample.component.html -->
    <igx-buttongroup [multiSelection]="true" [values]="bordersButtons"></igx-buttongroup>
    

    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';
    

    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
    );
    

    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.

    Using CSS variables

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

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

    Using Theme Overrides

    In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables.

    If the component is using the Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep. To prevent the custom theme to leak into other components, be sure to include the :host selector before ::ng-deep:

    :host {
        ::ng-deep {
            @include button-group($custom-button-group);
        }
    }
    

    Demo

    API References

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.