@page "/buttons"
@page "/button"

    <div class="row">
        <div class="col-xl-6">
            <div class="row">
                <div class="col-xl-6">
                    <h4>Button with text</h4>
                    <RadzenButton Click=@(args => OnClick("Button with text")) Text="Buttonx" Style="margin-bottom: 20px; width: 150px" />
                </div>
                <div class="col-xl-6">
                    <h4>Button with text and icon</h4>
                    <RadzenButton Click=@(args => OnClick("Button with text and icon")) Text="Button" Icon="account_circle" Style="margin-bottom: 20px; width: 150px" />
                </div>
            </div>
            <div class="row">
                <div class="col-xl-6">
                    <h4>Button with icon</h4>
                    <RadzenButton Click=@(args => OnClick("Button with icon")) Icon="account_circle" Style="margin-bottom: 20px; width: 80px" />
                </div>
                <div class="col-xl-6">
                    <h4>Button with image</h4>
                    <RadzenButton Click=@(args => OnClick("Button with image")) Image="images/radzen-nuget.png" ButtonStyle="ButtonStyle.Light" Style="margin-bottom: 20px; width: 80px" />
                </div>
            </div>
            <div class="row">
                <div class="col-xl-6">
                    <h4>Button with content</h4>
                    <RadzenButton Click=@(args => OnClick("Button with content")) Image="images/radzen-nuget.png" ButtonStyle="ButtonStyle.Light" Style="margin-bottom: 20px; width: 200px">
                        Some text
                        <RadzenImage Path="images/radzen-nuget.png" Style="width:20px;margin-left: 10px;" />
                    </RadzenButton>
                </div>
                <div class="col-xl-6">
                    <h4>Disabled Button</h4>
                    <RadzenButton Disabled="true" Text="Button" Style="margin-bottom: 20px; width: 150px" />
                </div>
            </div>
            <h4>Button styles</h4>
            <div class="row">
                <div class="col">
                    <RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Primary button")) Text="Primary" ButtonStyle="ButtonStyle.Primary" />
                    <RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Secondary button")) Text="Secondary" ButtonStyle="ButtonStyle.Secondary" />
                    <RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Light button")) Text="Light" ButtonStyle="ButtonStyle.Light" />
                    <RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Danger button")) Text="Danger" ButtonStyle="ButtonStyle.Danger" />
                    <RadzenButton style="margin: 0 1rem 1rem 0" Click=@(args => OnClick("Info button")) Text="Info" ButtonStyle="ButtonStyle.Info" />
                    <RadzenButton style="margin-bottom: 16px" Click=@(args => OnClick("Warning button ")) Text="Warning" ButtonStyle="ButtonStyle.Warning" />
                </div>
            </div>
            <h4>Busy Indicator</h4>
            <div class="row">
                <div class="col-xl-6">
                    <h5>Without BusyText</h5>
                    <RadzenButton style="margin: 0 1rem 1rem 0; width: 150px" IsBusy=@busy Click=@OnBusyClick Text="Save" />
                </div>

                <div class="col-xl-6">
                    <h5>With Busy Text</h5>
                    <RadzenButton style="margin: 0 1rem 1rem 0; width: 200px" Icon="save" BusyText="Saving ..." IsBusy=@busy Click=@OnBusyClick Text="Save" />
                </div>
            </div>
        </div>
       
    </div>


@code { 
            bool busy;

            void OnClick(string buttonName)
            {
               
            }

            async Task OnBusyClick()
            {
                busy = true;
                await Task.Delay(2000);
                busy = false;
            } }