{{#> base }}
    {{> AppSidebar/sidebar elements-buttons-standard=this }}
    <div class="app-main__outer">
        <div class="app-main__inner">
            {{> AppMain/page-title }}
            <div class="row">
                <div class="col-lg-6">
                    <div class="main-card mb-3 card">
                        <div class="card-body">
                            <h5 class="card-title">Solid
                            </h5>
                            <button class="mb-2 me-2 btn btn-primary">Primary
                            </button>
                            <button class="mb-2 me-2 btn btn-secondary">Secondary
                            </button>
                            <button class="mb-2 me-2 btn btn-success">Success
                            </button>
                            <button class="mb-2 me-2 btn btn-info">Info
                            </button>
                            <button class="mb-2 me-2 btn btn-warning">Warning
                            </button>
                            <button class="mb-2 me-2 btn btn-danger">Danger
                            </button>
                            <button class="mb-2 me-2 btn btn-focus">Focus
                            </button>
                            <button class="mb-2 me-2 btn btn-alternate">Alt
                            </button>
                            <button class="mb-2 me-2 btn btn-light">Light
                            </button>
                            <button class="mb-2 me-2 btn btn-dark">Dark
                            </button>
                            <button class="mb-2 me-2 btn btn-link">link
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="main-card mb-3 card">
                        <div class="card-body">
                            <h5 class="card-title">Color Transition
                            </h5>
                            <button class="mb-2 me-2 btn-transition btn btn-outline-primary">Primary
                            </button>
                            <button class="mb-2 me-2 btn-transition btn btn-outline-secondary">Secondary
                            </button>
                            <button class="mb-2 me-2 btn-transition btn btn-outline-success">Success
                            </button>
                            <button class="mb-2 me-2 btn-transition btn btn-outline-info">Info
                            </button>
                            <button class="mb-2 me-2 btn-transition btn btn-outline-warning">Warning
                            </button>
                            <button class="mb-2 me-2 btn-transition btn btn-outline-danger">Danger
                            </button>
                            <button class="mb-2 me-2 btn-transition btn btn-outline-focus">Focus
                            </button>
                            <button class="mb-2 me-2 btn-transition btn btn-outline-alternate">Alt
                            </button>
                            <button class="mb-2 me-2 btn-transition btn btn-outline-light">Light
                            </button>
                            <button class="mb-2 me-2 btn-transition btn btn-outline-dark">Dark
                            </button>
                            <button class="mb-2 me-2 btn-transition btn btn-outline-link">link
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="main-card mb-3 card">
                        <div class="card-body">
                            <h5 class="card-title">Color Transition No Borders
                            </h5>
                            <button class="mb-2 me-2 border-0 btn-transition btn btn-outline-primary">Primary
                            </button>
                            <button class="mb-2 me-2 border-0 btn-transition btn btn-outline-secondary">Secondary
                            </button>
                            <button class="mb-2 me-2 border-0 btn-transition btn btn-outline-success">Success
                            </button>
                            <button class="mb-2 me-2 border-0 btn-transition btn btn-outline-info">Info
                            </button>
                            <button class="mb-2 me-2 border-0 btn-transition btn btn-outline-warning">Warning
                            </button>
                            <button class="mb-2 me-2 border-0 btn-transition btn btn-outline-danger">Danger
                            </button>
                            <button class="mb-2 me-2 border-0 btn-transition btn btn-outline-focus">Focus
                            </button>
                            <button class="mb-2 me-2 border-0 btn-transition btn btn-outline-alternate">Alt
                            </button>
                            <button class="mb-2 me-2 border-0 btn-transition btn btn-outline-light">Light
                            </button>
                            <button class="mb-2 me-2 border-0 btn-transition btn btn-outline-dark">Dark
                            </button>
                            <button class="mb-2 me-2 border-0 btn-transition btn btn-outline-link">link
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="main-card mb-3 card">
                        <div class="card-body">
                            <h5 class="card-title">Active State
                            </h5>
                            <button class="mb-2 me-2 btn btn-primary active">Primary
                            </button>
                            <button class="mb-2 me-2 btn btn-secondary active">Secondary
                            </button>
                            <button class="mb-2 me-2 btn btn-success active">Success
                            </button>
                            <button class="mb-2 me-2 btn btn-info active">Info
                            </button>
                            <button class="mb-2 me-2 btn btn-warning active">Warning
                            </button>
                            <button class="mb-2 me-2 btn btn-danger active">Danger
                            </button>
                            <button class="mb-2 me-2 btn btn-focus active">Focus
                            </button>
                            <button class="mb-2 me-2 btn btn-alternate active">Alt
                            </button>
                            <button class="mb-2 me-2 btn btn-light active">Light
                            </button>
                            <button class="mb-2 me-2 btn btn-dark active">Dark
                            </button>
                            <button class="mb-2 me-2 btn btn-link active">link
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="main-card mb-3 card">
                        <div class="card-body">
                            <h5 class="card-title">Disabled State
                            </h5>
                            <button disabled="" class="mb-2 me-2 btn btn-primary disabled">Primary
                            </button>
                            <button disabled="" class="mb-2 me-2 btn btn-secondary disabled">Secondary
                            </button>
                            <button disabled="" class="mb-2 me-2 btn btn-success disabled">Success
                            </button>
                            <button disabled="" class="mb-2 me-2 btn btn-info disabled">Info
                            </button>
                            <button disabled="" class="mb-2 me-2 btn btn-warning disabled">Warning
                            </button>
                            <button disabled="" class="mb-2 me-2 btn btn-danger disabled">Danger
                            </button>
                            <button disabled="" class="mb-2 me-2 btn btn-focus disabled">Focus
                            </button>
                            <button disabled="" class="mb-2 me-2 btn btn-alternate disabled">Alt
                            </button>
                            <button disabled="" class="mb-2 me-2 btn btn-light disabled">Light
                            </button>
                            <button disabled="" class="mb-2 me-2 btn btn-dark disabled">Dark
                            </button>
                            <button disabled="" class="mb-2 me-2 btn btn-link disabled">link
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="main-card mb-3 card">
                        <div class="card-body">
                            <h5 class="card-title">Block Level
                            </h5>
                            <div class="d-grid gap-2">
                                <button class="mb-2 me-2 btn btn-primary btn-lg ">Block Large
                                </button>
                                <button class="mb-2 me-2 btn btn-primary ">Block Normal
                                </button>
                                <button class="mb-2 me-2 btn btn-primary btn-sm ">Block Small
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="main-card mb-3 card">
                        <div class="card-body">
                            <h5 class="card-title">Checkbox Buttons
                            </h5>
                            <div class="text-center">
                                <div role="group" class="btn-group-sm btn-group btn-group-toggle" data-toggle="buttons">
                                    <button type="button" class="btn btn-primary">One
                                    </button>
                                    <button type="button" class="btn btn-primary">Two
                                    </button>
                                    <button type="button" class="btn btn-primary">Three
                                    </button>
                                </div>
                                <div class="divider">
                                </div>
                                <div role="group" class="btn-group" data-toggle="buttons">
                                    <button type="button" class="btn btn-danger">One
                                    </button>
                                    <button type="button" class="btn btn-danger">Two
                                    </button>
                                    <button type="button" class="btn btn-danger">Three
                                    </button>
                                </div>
                                <div class="divider">
                                </div>
                                <div role="group" class="btn-group-lg btn-group btn-group-toggle" data-toggle="buttons">
                                    <button type="button" class="btn btn-alternate">One
                                    </button>
                                    <button type="button" class="btn btn-alternate">Two
                                    </button>
                                    <button type="button" class="btn btn-alternate">Three
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="main-card mb-3 card">
                        <div class="card-body">
                            <h5 class="card-title">Radio Buttons
                            </h5>
                            <div class="text-center">
                                <div class="btn-group btn-group-sm" role="group" aria-label="Basic radio toggle button group">
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
                                    <label class="btn btn-primary" for="btnradio1">One</label>
                            
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
                                    <label class="btn btn-primary" for="btnradio2">Two</label>
                            
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
                                    <label class="btn btn-primary" for="btnradio3">Three</label>
                                </div>
                                <div class="divider">
                                </div>
                                <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off" checked>
                                    <label class="btn btn-warning" for="btnradio4">One</label>
                            
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off">
                                    <label class="btn btn-warning" for="btnradio5">Two</label>
                            
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio6" autocomplete="off">
                                    <label class="btn btn-warning" for="btnradio6">Three</label>
                                </div>
                                <div class="divider">
                                </div>
                                <div class="btn-group btn-group-lg" role="group" aria-label="Basic radio toggle button group">
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio7" autocomplete="off" checked>
                                    <label class="btn btn-focus" for="btnradio7">One</label>
                            
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio8" autocomplete="off">
                                    <label class="btn btn-focus" for="btnradio8">Two</label>
                            
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio9" autocomplete="off">
                                    <label class="btn btn-focus" for="btnradio9">Three</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{> AppFooter/footer }}
    </div>
{{/ base }}