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.