Buttons Component for Blazor

EasyButton contains button components for Blazor, which make it easier to use material design icons as button icons. It uses (requires) Bootstrap for the design.

You can download it as a NuGet package and reference it in your Blazor project. https://www.nuget.org/packages/EasyButton/

Then you simply use it like other components.

<EasyButton.IconButton Type="submit" Text="Save">
    <span class="material-icons-outlined">
        done
    </span>
</EasyButton.IconButton>

The design is not special (uses Bootstrap). But the IconButton makes it easier to use material design icons. You simply copy and paste the icon span between the button tags.

Using the components

To use the buttons in your pages you have two possibilities

1. The plain button: Use like standard button with the button text between the tags.

<EasyButton.Button>Submit</EasyButton.Button>

2. The IconButton: Place the icon span between the tags and pass the button text through the Text attribute.

<EasyButton.IconButton Text="Submit">
        <span class="material-icons">done</span>
<EasyButton.IconButton>

For both types there is a number of attributes that can be used to change the button's appearance. Use Bootstrap btn- classes to change the colors. The button already contains the "btn" class. It only requires the btn- +color class.

Attributes for (standard) Button:

Attributes for IconButton:

*In addition to the above mentioned attributes

Using icons:

To use material icons follow the Developer guide: https://developers.google.com/fonts/docs/material_icons

Event handling:

The button is compatible with the click event. It can be invoked using OnClick attribute.

Version notes v.1.0.1 - 08.08.2021 Removed css classes: - button, all color classes Functions changed: - Color attribute removed - instead implemented usage of Bootstrap button btn- classes