Blazor Button

Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component features

Button variants:

<BlazorButton type="button">None</BlazorButton>
<BlazorButton type="button" Variants="new[] {BaseVariants.Primary}">Primary</BlazorButton>
<BlazorButton type="button" Variants="new[] {BaseVariants.Secondary}">Secondary</BlazorButton>
<BlazorButton type="button" Variants="new[] {BaseVariants.Success}">Success</BlazorButton>
<BlazorButton type="button" Variants="new[] {BaseVariants.Warning}">Warning</BlazorButton>
<BlazorButton type="button" Variants="new[] {BaseVariants.Danger}">Danger</BlazorButton>
<BlazorButton type="button" Variants="new[] {BaseVariants.Info}">Info</BlazorButton>

Button link:

<BlazorButton href="https://blazorschool.com" RenderAs="a" Variants="new[] {BaseVariants.Primary}">Blazor Library</BlazorButton>
<BlazorButton href="https://blazorschool.com" RenderAs="a" Variants="new[] {BaseVariants.Secondary}">Blazor Library</BlazorButton>
<BlazorButton href="https://blazorschool.com" RenderAs="a" Variants="new[] {BaseVariants.Success}">Blazor Library</BlazorButton>
<BlazorButton href="https://blazorschool.com" RenderAs="a" Variants="new[] {BaseVariants.Warning}">Blazor Library</BlazorButton>
<BlazorButton href="https://blazorschool.com" RenderAs="a" Variants="new[] {BaseVariants.Danger}">Blazor Library</BlazorButton>
<BlazorButton href="https://blazorschool.com" RenderAs="a" Variants="new[] {BaseVariants.Info}">Blazor Library</BlazorButton>

Button size:

Blazor Library Blazor Library
<BlazorButton href="https://blazorschool.com" RenderAs="a" Variants="new[] {BaseVariants.Primary, BaseSize.Small}">Blazor Library</BlazorButton>
<BlazorButton href="https://blazorschool.com" RenderAs="a" Variants="new[] {BaseVariants.Primary, BaseSize.Large}">Blazor Library</BlazorButton>

Button with click:

<BlazorButton type="button" Variants="new[] {BaseVariants.Primary}" @onclick='_ => Demonstrate = "Hello World"'>@Demonstrate</BlazorButton>
<BlazorButton type="button" Variants="new[] {BaseVariants.Primary}" onclick='alert("Hello World")'>Call a JS Function</BlazorButton>

Button render as input:

<BlazorButton type="button" Variants="new[] {BaseVariants.Danger}" RenderAs="input" value="Danger" />

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorButton btn
BlazorButton.small btn-sm
BlazorButton.large btn-lg
BlazorButton.primary btn-primary
BlazorButton.secondary btn-secondary
BlazorButton.success btn-success
BlazorButton.danger btn-danger
BlazorButton.warning btn-warning
BlazorButton.info btn-info

Parameters

BlazorButton

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙