Button.razor

@namespace ContosoSnsWebApp.Components

<button class="btn @ButtonClass @SizeClass @(Disabled ? "disabled" : "") @CssClass"
        type="@Type"
        disabled="@Disabled"
        @onclick="OnClick">
    @ChildContent
</button>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
    [Parameter] public string Variant { get; set; } = "primary"; // primary, secondary, outline, danger, etc.
    [Parameter] public bool Small { get; set; }
    [Parameter] public bool Disabled { get; set; }
    [Parameter] public string Type { get; set; } = "button"; // button, submit, reset
    [Parameter] public string? CssClass { get; set; } // Allow additional custom classes

    private string ButtonClass => Variant switch
    {
        "primary" => "btn-primary",
        "secondary" => "btn-secondary",
        "outline" => "btn-outline-primary", // Example mapping for outline
        "danger" => "btn-danger",
        _ => "btn-primary" // Default
    };

    private string SizeClass => Small ? "btn-sm" : "";
}