<button 
    type="button"
    href="#"
    @onclick="@OnClick"
    disabled=@Disabled
    style="@Style"
    class="@ClassList">
    <div class="@ContentClassList">
        @if (!string.IsNullOrEmpty(Glyph))
        {
            @if (GlyphPosition == Position.Top || GlyphPosition == Position.Bottom)
            {
                <div style="align-items:center">
                    @if (GlyphPosition == Position.Top)
                    {
                        <Glyph SVG="@Glyph" Color="@GlyphColor"/>
                    }
                    @ChildContent
                    @if (GlyphPosition == Position.Bottom)
                    {
                        <Glyph SVG="@Glyph" Color="@GlyphColor"/>
                    }
                </div>
            }
            @if (GlyphPosition == Position.Left || GlyphPosition == Position.Right)
            {
                <div style="display:flex; align-items:center">
                    @if (GlyphPosition == Position.Left)
                    {
                        <Glyph SVG="@Glyph" Color="@GlyphColor" Class="m-1" />
                    }
                    @ChildContent
                    @if (GlyphPosition == Position.Right)
                    {
                        <Glyph SVG="@Glyph" Color="@GlyphColor" Class="m-1" />
                    }
                </div>
            }
        } else
        {
            @ChildContent
        }
    </div>
</button>


<!--
<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
    <h2>Buttons</h2>
    <p>
        Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes,
        states, and more.
    </p>
    <div>
        <h4 class="text-core mt-5">Examples</h4>
        <div class="d-flex flex-wrap gap-3 ">
            <button type="button" href="#" class="btn btn-core">click me</button>
            <button type="button" href="#" class="btn btn-primary">click me</button>
            <button type="button" href="#" class="btn btn-secondary">click me</button>
            <button type="button" href="#" class="btn btn-success">click me</button>
            <button type="button" href="#" class="btn btn-info">click me</button>
            <button type="button" href="#" class="btn btn-warning">click me</button>
            <button type="button" href="#" class="btn btn-danger">click me</button>
            <button type="button" href="#" class="btn btn-white">click me</button>
            <button type="button" href="#" class="btn btn-light">click me</button>
            <button type="button" href="#" class="btn btn-dark">click me</button>
        </div>
    </div>
    <hr class="mt-4 mb-4">
    <div>
        <h4 class="text-core mt-5">Outline buttons</h4>
        <div class="d-flex flex-wrap gap-3 ">
            <button type="button" href="#" class="btn btn-outline-core">click me</button>
            <button type="button" href="#" class="btn btn-outline-primary">click me</button>
            <button type="button" href="#" class="btn btn-outline-secondary">click me</button>
            <button type="button" href="#" class="btn btn-outline-success">click me</button>
            <button type="button" href="#" class="btn btn-outline-info">click me</button>
            <button type="button" href="#" class="btn btn-outline-warning">click me</button>
            <button type="button" href="#" class="btn btn-outline-danger">click me</button>
            <button type="button" href="#" class="btn btn-outline-white">click me</button>
            <button type="button" href="#" class="btn btn-outline-light">click me</button>
            <button type="button" href="#" class="btn btn-outline-dark">click me</button>
        </div>
    </div>
    <hr class="mt-4 mb-4">
    <div>
        <h4 class="text-core mt-5">Sizes</h4>
        <div class="">
            <button type="button" href="#" class="btn btn-sm btn-core">small button</button>
            <button type="button" href="#" class="btn btn-sm btn-light">small button</button>
        </div>
        <div class="mt-4 ">
            <button type="button" href="#" class="btn btn-lg btn-core">large button</button>
            <button type="button" href="#" class="btn btn-lg btn-light">large button</button>
        </div>
        <div class="mt-4 ">
            <button type="button" href="#" class="btn btn-block btn-core">full width button</button>
            <button type="button" href="#" class="mt-4 btn btn-block btn-light">
                full width
                button
            </button>
        </div>
    </div>
    <hr class="mt-4 mb-4">
    <div>
        <h4 class="text-core mt-5">Button states</h4>
        <div class="">
            <button type="button" href="#" class="btn btn-core active" aria-pressed="true">
                active
                button
            </button>
            <button type="button" href="#" class="btn btn-core">normal button</button>
            <button type="button" href="#" class="btn btn-core disabled" aria-disabled="true">
                disabled
                button
            </button>
        </div>
        <div class="mt-4">
            <button type="button" href="#" class="btn btn-outline-core active" aria-pressed="true">active button</button>
            <button type="button" href="#" class="btn btn-outline-core">normal button</button>
            <button type="button" href="#" class="btn btn-outline-core disabled" aria-disabled="true">
                disabled
                button
            </button>
        </div>
    </div>
</section>
-->
