@page "/pulse-button"
@inject IStringLocalizer<PulseButtons> Localizer

<h3>@Localizer["PulseButtonHeader"]</h3>

<h4>@Localizer["PulseButtonPara"]</h4>

<DemoBlock Title="@Localizer["Block1Title"]"
           Introduction="@Localizer["Block1Intro"]"
           Name="Normal">
    <p>@Localizer["PulseButtonPara2"]</p>
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-fw fa-heart fa-beat" Color="Color.Primary"></PulseButton></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-fw fa-user fa-beat" Color="Color.Secondary"></PulseButton></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Success"></PulseButton></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Danger"></PulseButton></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Warning"></PulseButton></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Info"></PulseButton></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Dark"></PulseButton></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Light"></PulseButton></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Link"></PulseButton></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.None"></PulseButton></div>
    </div>
</DemoBlock>
