Blazor Button Overview

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

Blazor Button Example

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <style>
        .buttonContainer {
            display: flex;
            justify-content: space-evenly;
            margin-top: 20px;
        }
    </style>

    <div class="buttonContainer">
        <IgbButton style="margin:5px" Variant="ButtonVariant.Flat">Flat</IgbButton>
        <IgbButton style="margin:5px" Variant="ButtonVariant.Contained">Contained</IgbButton>
        <IgbButton style="margin:5px" Variant="ButtonVariant.Outlined">Outlined</IgbButton>
    </div>
</div>

@code {
    

}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Usage

Before using the IgbButton, you need to register it as follows:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule));
razor

You will also need to link an additional CSS file to apply the styling to the IgbButton component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor

<IgbButton />
razor

Prefix / Suffix

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

<IgbButton Variant="@ButtonVariant.Contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</IgbButton>
razor

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 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.

<IgbButton Variant="@ButtonVariant.Contained" />
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Contained">Contained</IgbButton>
</div>

@code {
    

}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Outlined Button

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

<IgbButton Variant="@ButtonVariant.Outlined" />
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton style="margin:5px" Variant="ButtonVariant.Outlined">Outlined</IgbButton>
</div>

@code {
    

}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Flat Button

Analogically, we can switch to flat variant.

<IgbButton Variant="@ButtonVariant.Flat" />
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Flat">Flat</IgbButton>
</div>

@code {
    

}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Floating Action Button

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

<IgbButton Variant="@ButtonVariant.Fab" />
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Fab">
        <span slot="prefix">+</span>
        Add
    </IgbButton>
</div>

@code {
    

}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Button Sizing

Users can change the size of the IgbButton 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.

<IgbRadioGroup id="radioGroup" Alignment="ContentOrientation.Horizontal" >
    <IgbRadio Value="small" LabelPosition="RadioLabelPosition.After" @onclick="OnSmallClick">Small</IgbRadio>
    <IgbRadio Value="medium" LabelPosition="RadioLabelPosition.After" @onclick="OnMediumClick">Medium</IgbRadio>
    <IgbRadio Value="large" LabelPosition="RadioLabelPosition.After" Checked="true" @onclick="OnLargeClick">Large</IgbRadio>
</IgbRadioGroup>

@code {
    private SizableComponentSize SizableComponentSize = SizableComponentSize.Large;

    protected override void OnInitialized()
    {
    }

    public void OnSmallClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Small;
    }

    public void OnMediumClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Medium;
    }

    public void OnLargeClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Large;
    }
}
razor

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<style>
.buttonContainer {
display: flex;
justify-content: space-evenly;
margin-top: 20px;
}

#radioGroup {
display: flex;
margin: 0 auto;
width: 15%;
}
</style>

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}
</style>
<div class="container vertical">
    <IgbRadioGroup id="radioGroup" Alignment="ContentOrientation.Horizontal" >
        <IgbRadio name="size" Value="small" LabelPosition="ToggleLabelPosition.After" Change="OnRadioSizeClick">Small</IgbRadio>
        <IgbRadio name="size" Value="medium" LabelPosition="ToggleLabelPosition.After" Checked="true" Change="OnRadioSizeClick">Medium</IgbRadio>
        <IgbRadio name="size" Value="large" LabelPosition="ToggleLabelPosition.After" Change="OnRadioSizeClick">Large</IgbRadio>
    </IgbRadioGroup>

    <div class="buttonContainer">
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Flat">Flat</IgbButton>
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Contained">Contained</IgbButton>
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Outlined">Outlined</IgbButton>
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Fab">Like</IgbButton>
    </div>
</div>

@code {
    

    private string ButtonsSize = "size-medium";

    public void OnRadioSizeClick(IgbRadioChangeEventArgs e)
    {
        this.ButtonsSize = $"size-{e.Detail.Value.ToLower()}";
    }
}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}cssCOPY CODE

Download

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

<IgbButton Variant="@ButtonVariant.Contained" Download="Url" Href="https://ko.infragistics.com/" Target="@ButtonBaseTarget._blank">
    Download
</IgbButton>
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Contained" Download="Url" Href="https://www.infragistics.com/" Target="ButtonBaseTarget._blank">
        Download
    </IgbButton>
</div>

@code {
    

}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Styling

The IgbButton 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

API References

• IgbButton
• DisplayType
• Download
• Href
• IgbRadioGroup
• IgbRadio
• Styling & Themes

Additional Resources

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub