Emitted when the button is clicked.
Called when the button is selected.
Enables/disables the button.
<button igxButton="fab" disabled></button>
Sets/gets the role attribute.
this.button.role = 'navbutton';
let buttonRole = this.button.role;
Sets the background color of the button.
<button type="button" igxButton igxButtonBackground="red"></button>
in version 17.1.0.
Sets the button text color.
<button type="button" igxButton igxButtonColor="orange"></button>
in version 17.1.0.
Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
Sets the aria-label attribute.
<button type="button" igxButton="flat" igxLabel="Label"></button>
Returns the underlying DOM element.
Gets or sets whether the button is selected. Mainly used in the IgxButtonGroup component and it will have no effect if set separately.
<button type="button" igxButton="flat" [selected]="button.selected"></button>
Sets the type of the button.
<button type="button" igxButton="outlined"></button>
Sets the --component-size CSS variable based on the value of Display Density
The Button directive provides the Ignite UI Button functionality to every component that's intended to be used as a button.
Igx Module
IgxButtonModule
Igx Parent
Data Entry & Display
Igx Theme
igx-button-theme
Igx Keywords
button, span, div, click
Remarks
The Ignite UI Button directive is intended to be used by any button, span or div and turn it into a fully functional button.
Example