Button Component

The Blazor Button component lets you enable clickable elements that trigger actions in your Blazor app. You get full control over button variants, styling, and sizes. The Button component also lets you handle clicks, toggle the button, and disable it when needed.

Live Demo

Anatomy

The Blazor Button renders its label and optional prefix and suffix content in the component shadow DOM.

The Button renders its content inside the base CSS part. Use the default slot for the label and the prefix and suffix slots for optional content before and after the label.

<igc-button>
├── ::part(base)
├── prefix slot
├── default slot content
└── suffix slot
</igc-button>

Getting Started

To use the Blazor Button, follow the Ignite UI for Blazor Getting Started topic for the basic project setup, then register the component for your target platform.

For Blazor using the IgniteUI.Blazor package, register the Button module as follows:

// in Program.cs file

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

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" />

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

<IgbButton />

Usage

Use the Blazor Button to trigger an action, submit form data, or navigate to another page. Choose the appropriate button type and variant for the action, then add optional content such as icons when needed.

The Button content is placed in its default slot. Add the action label as the button content so that the purpose of the action is clear to all users.

<IgbButton>Save changes</IgbButton>

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

We recommend using a <span> element when adding simple text, symbols, or emojis, and an IgbIcon component when adding icons to the prefix and suffix slots.

<IgbButton Variant="@ButtonVariant.Contained">
    <span slot="prefix">Download</span>
    <IgbIcon slot="suffix" IconName="download"></IgbIcon>
</IgbButton>

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

Variants

Five types of Buttons are supported: contained button for prominent primary actions, outlined button for secondary actions, flat button for subtle actions, floating action button (Fab) for prominent main actions, and icon button for actions represented by an icon. Icon Buttons can also use any of the other four 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" />

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" />

Flat Button

Analogically, we can switch to flat variant.

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

Floating Action Button

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

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

States

You may also insert each Button in a disabled state because they all support both Enabled and Disabled variants. In Figma, you can switch between the two using a boolean property in the properties panel. In code, use the disabled property or attribute when an action is not currently available.

<IgbButton Variant="@ButtonVariant.Contained" Disabled="true">Disabled</IgbButton>

Interaction States

In Figma the Enabled buttons support Idle, Hover, Focused and Focused & Hover states which can be switched between by changing the State property. In code, these interaction states are provided by the platform Button component and should preserve a visible focus indicator for keyboard users.

<igc-button variant="contained">Ripple and focus states</igc-button>

Layout Template

Contained, Outlined, Flat, and Floating Action Buttons support flexible icon and label templates. In Figma, to show or hide the icons, you can use the Left Icon and Right Icon boolean properties. If you want to have an Icon Button, you can set the Content property to Icon.

<IgbButton Variant="@ButtonVariant.Outlined">
    <span slot="prefix">★</span>
    Save changes
    <span slot="suffix">→</span>
</IgbButton>

Size

Users can change the size of the IgbButton using the --ig-size CSS variable.

<IgbButton Class="button-size-small" Variant="ButtonVariant.Contained">
    Small
</IgbButton>

.button-size-small {
    --ig-size: var(--ig-size-small);
}

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.

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

Do/Don’t

When to use: Use Button for actions that change state, submit data, or trigger an application command.

When not to use: Use Icon Button when the action is represented only by an icon and does not require a text label.

Do	Don’t

Properties

The Blazor Button exposes platform-specific properties for controlling its content, appearance, and behavior.

The Blazor Button exposes the following properties.

Styling

Customize the Button with theme settings, CSS variables, or CSS parts to match the visual language of your application.

Sass Theming

Use the standard Ignite UI for Blazor theme workflow to customize the Button consistently with the rest of the application.

CSS Variables

Use the generated CSS variables on the Button element to override the theme values for a specific instance. The variant-specific theme functions derive related interaction-state values from the primary theme parameters.

Style Parts

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

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;
}

Styling with Tailwind

You can style the Button with the custom Tailwind utility classes from igniteui-theming. Make sure to set up Tailwind first, then import the Ignite UI utilities in your global stylesheet:

@import "tailwindcss";
@import "igniteui-theming/tailwind/utilities/material.css";

<IgbButton Class="!light-contained-button ![--background:#7B9E89]">Contained Button</IgbButton>

The exclamation mark (!) gives the Tailwind utility precedence over the Button’s default theme styles.

Accessibility

The Blazor Button is an interactive control for actions and, when href is set, navigation. Use the native button behavior for commands and preserve the link behavior for navigation.

Keyboard Interaction

The Button uses the keyboard behavior of its rendered native control. A disabled Button is not interactive, and a Button with href is rendered as a link instead of a command button.

Screen Readers / ARIA

The Button renders a native button for command actions and an a element when href is set. The native element supplies the appropriate role and keyboard semantics.

• The Button’s visible content is used as its accessible name when it contains meaningful text.
• Provide an aria-label or another accessible naming mechanism for an icon-only Button.
• A disabled Button exposes its disabled state through the rendered native control.
• Button click event handlers perform application actions; they do not replace the Button’s accessible name, role, or state.

Accessibility Compliance

This topic does not make a product-level WCAG, Section 508, or EN 301 549 conformance claim. Verify the rendered Button and its surrounding application against the accessibility requirements that apply to the target project.

Your responsibilities:

• Give every Button a meaningful accessible name, especially icon-only Buttons.
• Use a command Button for actions and href for navigation; do not emulate one with the other.
• Do not rely on color, hover, or focus styling alone to communicate the action or state.
• Preserve sufficient contrast and a visible focus indicator when customizing the Button theme.

Troubleshooting

Use this section to check boundaries and common decisions before treating Button as a command, navigation link, or form control.

Why does the Button behave like a link?

When href is set, the Button is used for navigation rather than for a command action. Remove href when the control should trigger application logic instead of navigating to a URL.

Why is the Button not keyboard-focusable?

Check whether the Button is disabled or whether the surrounding application changes its focus behavior. Use a focusable Button for actions that must be available through keyboard navigation.

Known Limitations

The Button has the following platform-independent boundaries:

• Use a text label or another accessible naming mechanism for every action; an unlabeled icon-only Button does not communicate its purpose by itself.
• Setting href changes the Button from an action control to a navigation control. Use Icon Button for icon-only actions and verify its accessible name separately.
• The Button’s visual appearance does not determine whether the surrounding application action is available or valid; application logic must provide that state and feedback.

API References

Dependencies

The Blazor Button requires the corresponding Blazor package and theme stylesheet. The sizing example also uses the IgbRadio and IgbRadioGroup components.

Additional Resources

The following resources provide additional Blazor Button guidance and project support.

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

Related Components

The Blazor Button is commonly used with related components when an action needs a specialized presentation.

• Icon Button is intended for icon-only actions.

FAQ