<button class="buttonContainer @MyButtonType.ToString().ToLower()" @onclick="ButtonClicked">@ChildContent</button>

<style>
    .buttonContainer {
        padding: 16px;
        border: 1px solid;
        border-radius: 8px;
        font-weight: 800;
        font-size: 1.2rem;
    }

    .@(MyButtonType.Primary.ToString().ToLower()) {
        border-color: var(--primary);
        background-color: var(--primary);
    }

    .@MyButtonType.Secondary.ToString().ToLower() {
        border-color: var(--secondary);
        background-color: var(--secondary);
    }

    .@MyButtonType.Primary.ToString().ToLower():hover {
        background-color: var(--primary-hover);
        border-color: var(--primary-border-hover);
        color: white;
    }

    .@MyButtonType.Secondary.ToString().ToLower():hover {
        background-color: var(--secondary-hover);
        border-color: var(--secondary-border-hover);
        color: white;
    }

</style>


@code {

    [Parameter] public RenderFragment ChildContent { get; set; } = default!;

    [Parameter] public EventCallback<EventArgs> OnClick { get; set; }

    [Parameter] public MyButtonType MyButtonType { get; set; }

    private void ButtonClicked(EventArgs eventArgs)
    {
        OnClick.InvokeAsync(eventArgs);
    }

}