Buttons — Blazify

Variants

There are four basic appearance options, and the default variant is set to `Filled`.

razor

@using BzCore.Components.Button
@using BzCore.Enums

<BzButton Text="Filled"   Color="BzColor.Primary" />
<BzButton Text="Outlined" Color="BzColor.Primary" Variant="BzButtonVariant.Outlined" />
<BzButton Text="Text"     Color="BzColor.Primary" Variant="BzButtonVariant.Text" />
<BzButton Text="Soft"     Color="BzColor.Primary" Variant="BzButtonVariant.Soft" />

Colours

Every colour pairs with every variant.

razor

@using BzCore.Components.Button
@using BzCore.Enums

<BzButton Text="Primary" Color="BzColor.Primary" />
<BzButton Text="Success" Color="BzColor.Success" />
<BzButton Text="Warning" Color="BzColor.Warning" />
<BzButton Text="Danger"  Color="BzColor.Danger" />
<BzButton Text="Info"    Color="BzColor.Info" />

Sizes

Three sizes; Medium is the default.

razor

@using BzCore.Components.Button
@using BzCore.Enums

<BzButton Text="کوچک"  Size="BzSize.Small"  Color="BzColor.Primary" />
<BzButton Text="متوسط" Size="BzSize.Medium" Color="BzColor.Primary" />
<BzButton Text="بزرگ"  Size="BzSize.Large"  Color="BzColor.Primary" />

With & without icons

StartIcon and EndIcon follow RTL automatically. IconOnly makes a square icon button.

razor

@using BzCore.Components.Button
@using BzCore.Enums

@* StartIcon / EndIcon flip automatically in RTL *@
<BzButton Text="ذخیره" StartIcon="fa-solid fa-floppy-disk" Color="BzColor.Primary" />
<BzButton Text="بعدی" EndIcon="fa-solid fa-angle-left" Variant="BzButtonVariant.Outlined" />

@* No Text + IconOnly = a square icon button *@
<BzButton IconOnly StartIcon="fa-solid fa-trash" Color="BzColor.Danger"
          Variant="BzButtonVariant.Soft" />

Loading & full width

Using `ref`, you can manually show and hide the loading state—for example, show it before sending the request and hide it afterward.

razor

@using BzCore.Components.Button
@using BzCore.Enums

<BzButton @ref="_btn" Text="ذخیره" Color="BzColor.Primary" OnClick="Save" />

<BzButton Text="تمام عرض" FullWidth Color="BzColor.Secondary" />

@code {
    private BzButton _btn = default!;

    private async Task Save()
    {
        _btn.ShowSpinner();     
        await Task.Delay(1200); // request to server
        _btn.HideSpinner();
    }
}