Web Components Button Overview

    The Web Components Button Component lets you enable clickable elements that trigger actions in your Web Components 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 Web Components Button OnClick event, toggle the Web Components button, disable the Web Components button, and more.

    Web Components Button Example

    EXAMPLE
    TS
    HTML
    ButtonOverviewStyle.css
    index.css
    Edit in:

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

    Usage

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents
cmd

    You will then need to import the IgcButtonComponent, its necessary CSS, and register its module, like so:

    import { defineComponents, IgcButtonComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcButtonComponent);
ts

    For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

    The simplest way to start using the IgcButtonComponent is as follows:

    <igc-button>Click me</igc-button>
html
    Ignite UI for Web Components | CTA Banner

    Prefix / Suffix

    With prefix and suffix slots of the IgcButtonComponent component, we can add different content before and after the main content of the button.

    <igc-button type="button" variant="contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</igc-button>
html

    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 Type by setting the property to any of the following values:

    • Submit - when we want to submit the form data
    • reset - when we want to reset form data to its initial values
    • button - 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.

    <igc-button variant="contained">Contained</igc-button>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Outlined Button

    All you have to do to create an outlined button is to change the value of the variant property:

    <igc-button variant="outlined">Outlined</igc-button>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Flat Button

    Analogically, we can switch to flat variant.

    <igc-button variant="flat">Flat</igc-button>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Floating Action Button

    We can create a floating action button by setting the variant property to fab:

    <igc-button variant="fab">Fab</igc-button>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    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 { defineComponents, IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
defineComponents(IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent);
ts
    <igc-radio-group id="radio-group" alignment="horizontal">
    <igc-radio name="size" value="small" label-position="after">Small</igc-radio>
    <igc-radio name="size" value="medium" label-position="after" checked>Medium</igc-radio>
    <igc-radio name="size" value="large" label-position="after">Large</igc-radio>
</igc-radio-group>
html
    this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;
this.outlinedButton = document.getElementById('outlined-btn') as IgcButtonComponent;
this.flatButton = document.getElementById('flat-btn') as IgcButtonComponent;
this.containedButton = document.getElementById('contained-btn') as IgcButtonComponent;
this.fabButton = document.getElementById('fab-btn') as IgcButtonComponent;

this.radioGroup.addEventListener('click', (radio: any) => {
    this.outlinedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.flatButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.containedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.fabButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
}); 
ts

    The result of implementing the above code should look like the following:

    EXAMPLE
    TS
    HTML
    ButtonSizingStyle.css
    index.css
    Edit in:

    Download

    Setting the download property will prompt the user to save the linked URL instead of navigating to it.

    <igc-button
    href=""
    variant="contained"
    download="url_to_content"
    target="_blank">
    Download
</igc-button>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Styling

    The IgcButtonComponent component exposes three CSS parts which we can use for styling:

    Name Description
    base The native button element of the igc-button component.
    prefix The prefix container of the igc-button component.
    suffix The suffix container of the igc-button component.

    The base CSS part allows us to style the wrapped element (<button> or <a>).

    igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}
css

    EXAMPLE
    TS
    HTML
    ButtonStyle.css
    index.css
    Edit in:

    API References

    Additional Resources