React Button Overview
The React Button Component lets you enable clickable elements that trigger actions in your React app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the React Button clicked callback, toggle the React button, disable the React button, and more.
React Button Example
Usage
First, you need to the install the corresponding Ignite UI for React npm package by running the following command:
npm install igniteui-react
You will then need to import the IgrButton
, its necessary CSS, and register its module, like so:
import { IgrButtonModule, IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
<IgrButton />
Prefix / Suffix
With prefix
and suffix
slots of the IgrButton
component, we can add different content before and after the main content of the button.
<IgrButton type="button" variant="contained">
<span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</IgrButton>
Type
The button component will change its internal structure from a <button>
to an <a>
type element when the href
attribute is set. In that case the button can be thought of as a regular link. Setting the href
attribute will allow you to also set the rel
, target
and download
attributes.
In the case when the button component uses an actual <button>
element internally, we can specify its displayType
by setting the property to any of the following values:
Submit
- when we want to submit the form datareset
- when we want to reset form data to its initial valuesbutton
- when we want to add button with a custom functionality anywhere on a webpage
Button Variants
Contained Button
Use the variant
attribute to add a simple contained button in your component template. Note that if you do not set variant, by default it will be set to contained.
<IgrButton variant="contained"><span>Contained</span></IgrButton>
Outlined Button
All you have to do to create an outlined
button is to change the value of the variant
property:
<IgrButton variant="outlined"><span>Outlined</span></IgrButton>
Flat Button
Analogically, we can switch to flat
variant.
<IgrButton variant="flat"><span>Flat</span></IgrButton>
Floating Action Button
We can create a floating action button by setting the variant
property to fab
:
<IgrButton variant="fab"><span>Fab</span></IgrButton>
Button Sizing
Users can change the size of the button
component using the --ig-size
CSS variable. In the following example, we will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the button.
import { IgrButton, IgrRadio, IgrRadioGroup, IgrButtonModule, IgrRadioModule, IgrRadioGroupModule } from 'igniteui-react';
<IgrRadioGroup alignment="horizontal" style={{display: 'flex', margin: '0 auto', width: '15%'}}>
<IgrRadio name="size" value="small" labelPosition="after" checked={true} change={this.onRadioChange}>
<span>Small</span>
</IgrRadio>
<IgrRadio name="size" value="medium" labelPosition="after" change={this.onRadioChange}>
<span>Medium</span>
</IgrRadio>
<IgrRadio name="size" value="large" labelPosition="after" change={this.onRadioChange}>
<span>Large</span>
</IgrRadio>
</IgrRadioGroup>
<div>
<IgrButton ref={this.flatButtonRef} className="flat-btn" variant="flat"><span>Flat</span></IgrButton>
<IgrButton ref={this.containedButtonRef} className="contained-btn" variant="contained"><span>Contained</span></IgrButton>
<IgrButton ref={this.outlinedButtonRef} className="outlined-btn" variant="outlined"><span>Outlined</span></IgrButton>
<IgrButton ref={this.fabButtonRef} className="fab-btn" variant="fab"><span>Like</span></IgrButton>
</div>
public onRadioChange(e: any) {
this.flatButton.size = e.value;
this.containedButton.size = e.value;
this.outlinedButton.size = e.value;
this.fabButton.size = e.value;
}
The result of implementing the above code should look like the following:
Download
Setting the download
property will prompt the user to save the linked URL instead of navigating to it.
<IgrButton
href=""
variant="contained"
download="url"
target="_blank" >
<span>Download</span>
</IgrButton>
Styling
The button component exposes base
CSS part that allows us to style the wrapped element (<button>
or <a>
).
igc-button::part(base) {
background-color: #e99221;
color: #011627;
padding: 18px;
}