@extends('layout.layout')
@php
    $title='Button';
    $subTitle = 'Components / Button';
@endphp

@section('content')

    <div class="row gy-4">
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Default Buttons</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <button type="button" class="btn btn-primary-600 radius-8 px-20 py-11">Primary</button>
                        <button type="button" class="btn btn-lilac-600 radius-8 px-20 py-11">Secondary</button>
                        <button type="button" class="btn btn-success-600 radius-8 px-20 py-11">Success</button>
                        <button type="button" class="btn btn-info-600 radius-8 px-20 py-11">Info</button>
                        <button type="button" class="btn btn-warning-600 radius-8 px-20 py-11">Warning</button>
                        <button type="button" class="btn btn-danger-600 radius-8 px-20 py-11">Danger</button>
                        <button type="button" class="btn btn-neutral-900 text-base radius-8 px-20 py-11">Dark</button>
                        <button type="button" class="btn btn-link text-secondary-light text-decoration-none radius-8 px-20 py-11">Link</button>
                        <button type="button" class="btn btn-light-100 text-dark radius-8 px-20 py-11">Light</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Outline Buttons</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <button type="button" class="btn btn-outline-primary-600 radius-8 px-20 py-11">Primary</button>
                        <button type="button" class="btn btn-outline-lilac-600 radius-8 px-20 py-11">Secondary</button>
                        <button type="button" class="btn btn-outline-success-600 radius-8 px-20 py-11">Success</button>
                        <button type="button" class="btn btn-outline-info-600 radius-8 px-20 py-11">Info</button>
                        <button type="button" class="btn btn-outline-warning-600 radius-8 px-20 py-11">Warning</button>
                        <button type="button" class="btn btn-outline-danger-600 radius-8 px-20 py-11">Danger</button>
                        <button type="button" class="btn btn-outline-neutral-900 radius-8 px-20 py-11">Dark</button>
                        <button type="button" class="btn btn-outline-link text-secondary-light text-decoration-none radius-8 px-20 py-11">Link</button>
                        <button type="button" class="btn btn-outline-light-100 text-dark radius-8 px-20 py-11">Light</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Rounded Buttons</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <button type="button" class="btn rounded-pill btn-primary-600 radius-8 px-20 py-11">Primary</button>
                        <button type="button" class="btn rounded-pill btn-lilac-600 radius-8 px-20 py-11">Secondary</button>
                        <button type="button" class="btn rounded-pill btn-success-600 radius-8 px-20 py-11">Success</button>
                        <button type="button" class="btn rounded-pill btn-info-600 radius-8 px-20 py-11">Info</button>
                        <button type="button" class="btn rounded-pill btn-warning-600 radius-8 px-20 py-11">Warning</button>
                        <button type="button" class="btn rounded-pill btn-danger-600 radius-8 px-20 py-11">Danger</button>
                        <button type="button" class="btn rounded-pill btn-neutral-900 text-base radius-8 px-20 py-11">Dark</button>
                        <button type="button" class="btn rounded-pill btn-link text-secondary-light text-decoration-none radius-8 px-20 py-11">Link</button>
                        <button type="button" class="btn rounded-pill btn-light-100 text-dark radius-8 px-20 py-11">Light</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Rounded Buttons</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <button type="button" class="btn rounded-pill btn-outline-primary-600 radius-8 px-20 py-11">Primary</button>
                        <button type="button" class="btn rounded-pill btn-outline-lilac-600 radius-8 px-20 py-11">Secondary</button>
                        <button type="button" class="btn rounded-pill btn-outline-success-600 radius-8 px-20 py-11">Success</button>
                        <button type="button" class="btn rounded-pill btn-outline-info-600 radius-8 px-20 py-11">Info</button>
                        <button type="button" class="btn rounded-pill btn-outline-warning-600 radius-8 px-20 py-11">Warning</button>
                        <button type="button" class="btn rounded-pill btn-outline-danger-600 radius-8 px-20 py-11">Danger</button>
                        <button type="button" class="btn rounded-pill btn-outline-neutral-900 radius-8 px-20 py-11">Dark</button>
                        <button type="button" class="btn rounded-pill btn-outline-link text-secondary-light text-decoration-none radius-8 px-20 py-11">Link</button>
                        <button type="button" class="btn rounded-pill btn-outline-light-100 text-dark radius-8 px-20 py-11">Light</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Soft Buttons</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <button type="button" class="btn rounded-pill btn-primary-100 text-primary-600 radius-8 px-20 py-11">Primary</button>
                        <button type="button" class="btn rounded-pill btn-lilac-100 text-lilac-600 radius-8 px-20 py-11">Secondary</button>
                        <button type="button" class="btn rounded-pill btn-success-100 text-success-600 radius-8 px-20 py-11">Success</button>
                        <button type="button" class="btn rounded-pill btn-info-100 text-info-600 radius-8 px-20 py-11">Info</button>
                        <button type="button" class="btn rounded-pill btn-warning-100 text-warning-600 radius-8 px-20 py-11">Warning</button>
                        <button type="button" class="btn rounded-pill btn-danger-100 text-danger-600 radius-8 px-20 py-11">Danger</button>
                        <button type="button" class="btn rounded-pill btn-neutral-100 text-primary-light radius-8 px-20 py-11">Dark</button>
                        <button type="button" class="btn rounded-pill btn-link text-secondary-light text-decoration-none radius-8 px-20 py-11">Link</button>
                        <button type="button" class="btn rounded-pill btn-light-50 text-dark radius-8 px-20 py-11">Light</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Text Buttons</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <button type="button" class="btn rounded-pill text-primary-600 radius-8 px-20 py-11">Primary</button>
                        <button type="button" class="btn rounded-pill text-lilac-600 radius-8 px-20 py-11">Secondary</button>
                        <button type="button" class="btn rounded-pill text-success-600 radius-8 px-20 py-11">Success</button>
                        <button type="button" class="btn rounded-pill text-info-600 radius-8 px-20 py-11">Info</button>
                        <button type="button" class="btn rounded-pill text-warning-600 radius-8 px-20 py-11">Warning</button>
                        <button type="button" class="btn rounded-pill text-danger-600 radius-8 px-20 py-11">Danger</button>
                        <button type="button" class="btn rounded-pill text-primary-light radius-8 px-20 py-11">Dark</button>
                        <button type="button" class="btn rounded-pill text-secondary-light text-decoration-none radius-8 px-20 py-11">Link</button>
                        <button type="button" class="btn rounded-pill text-secondary-light radius-8 px-20 py-11">Light</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Buttons with Label</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <button type="button" class="btn btn-primary-600 radius-8 px-20 py-11 d-flex align-items-center gap-2">
                            <iconify-icon icon="mingcute:square-arrow-left-line" class="text-xl"></iconify-icon> Left Icon
                        </button>
                        <button type="button" class="btn btn-outline-primary-600 radius-8 px-20 py-11 d-flex align-items-center gap-2">
                            <iconify-icon icon="mingcute:square-arrow-left-line" class="text-xl"></iconify-icon> Left Icon
                        </button>
                        <button type="button" class="btn btn-success-600 radius-8 px-20 py-11 d-flex align-items-center gap-2">
                            Right Icon <iconify-icon icon="mingcute:square-arrow-right-line" class="text-xl"></iconify-icon>
                        </button>
                        <button type="button" class="btn btn-outline-success-600 radius-8 px-20 py-11 d-flex align-items-center gap-2">
                            Right Icon <iconify-icon icon="mingcute:square-arrow-right-line" class="text-xl"></iconify-icon>
                        </button>
                        <button type="button" class="btn btn-warning-600 radius-8 p-20 w-60-px h-50-px d-flex align-items-center justify-content-center gap-2">
                            <iconify-icon icon="mingcute:square-arrow-up-line" class="text-xl"></iconify-icon>
                        </button>
                        <button type="button" class="btn btn-outline-info-600 radius-8 p-20 w-60-px h-50-px d-flex align-items-center justify-content-center gap-2">
                            <iconify-icon icon="mingcute:square-arrow-down-line" class="text-xl"></iconify-icon>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Buttons with Label Round</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <button type="button" class="btn rounded-pill btn-primary-600 radius-8 px-20 py-11 d-flex align-items-center gap-2">
                            <iconify-icon icon="mingcute:square-arrow-left-line" class="text-xl"></iconify-icon> Left Icon
                        </button>
                        <button type="button" class="btn rounded-pill btn-outline-primary-600 radius-8 px-20 py-11 d-flex align-items-center gap-2">
                            <iconify-icon icon="mingcute:square-arrow-left-line" class="text-xl"></iconify-icon> Left Icon
                        </button>
                        <button type="button" class="btn rounded-pill btn-success-600 radius-8 px-20 py-11 d-flex align-items-center gap-2">
                            Right Icon <iconify-icon icon="mingcute:square-arrow-right-line" class="text-xl"></iconify-icon>
                        </button>
                        <button type="button" class="btn rounded-pill btn-outline-success-600 radius-8 px-20 py-11 d-flex align-items-center gap-2">
                            Right Icon <iconify-icon icon="mingcute:square-arrow-right-line" class="text-xl"></iconify-icon>
                        </button>
                        <button type="button" class="btn rounded-pill btn-warning-600 radius-8 p-20 w-60-px h-50-px d-flex align-items-center justify-content-center gap-2">
                            <iconify-icon icon="mingcute:square-arrow-up-line" class="text-xl"></iconify-icon>
                        </button>
                        <button type="button" class="btn rounded-pill btn-outline-info-600 radius-8 p-20 w-60-px h-50-px d-flex align-items-center justify-content-center gap-2">
                            <iconify-icon icon="mingcute:square-arrow-down-line" class="text-xl"></iconify-icon>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Buttons Sizes</h6>
                </div>
                <div class="card-body p-24">
                    <div class="d-flex flex-wrap align-items-center gap-3">
                        <button type="button" class="btn btn-primary-600 radius-8 px-20 py-11"> Large Button</button>
                        <button type="button" class="btn btn-success-600 radius-8 px-16 py-9">Medium Button</button>
                        <button type="button" class="btn btn-warning-600 radius-8 px-14 py-6 text-sm">Small Button</button>
                    </div>
                    <div class="d-flex flex-wrap align-items-center gap-3 mt-16">
                        <button type="button" class="btn btn-primary-100 text-primary-600 radius-8 px-20 py-11"> Large Button</button>
                        <button type="button" class="btn btn-success-100 text-success-600 radius-8 px-16 py-9">Medium Button</button>
                        <button type="button" class="btn btn-warning-100 text-warning-600 radius-8 px-14 py-6 text-sm">Small Button</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Checkbox & Radio Buttons</h6>
                </div>
                <div class="card-body py-16 px-24 d-flex flex-wrap align-items-center gap-3">
                    <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
                        <input type="checkbox" class="btn-check" id="btncheck1">
                        <label class="btn btn-outline-primary-600 px-20 py-11 radius-8" for="btncheck1">Checkbox 1</label>

                        <input type="checkbox" class="btn-check" id="btncheck2">
                        <label class="btn btn-outline-primary-600 px-20 py-11" for="btncheck2">Checkbox 2</label>

                        <input type="checkbox" class="btn-check" id="btncheck3">
                        <label class="btn btn-outline-primary-600 px-20 py-11 radius-8" for="btncheck3">Checkbox 3</label>
                    </div>

                    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                        <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
                        <label class="btn btn-outline-warning-600 px-20 py-11 radius-8" for="btnradio1">Radio 1</label>

                        <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
                        <label class="btn btn-outline-warning-600 px-20 py-11" for="btnradio2">Radio 2</label>

                        <input type="radio" class="btn-check" name="btnradio" id="btnradio3">
                        <label class="btn btn-outline-warning-600 px-20 py-11 radius-8" for="btnradio3">Radio 3</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Buttons Group</h6>
                </div>
                <div class="card-body py-16 px-24 d-flex flex-wrap align-items-center gap-3">
                    <div class="btn-group radius-8" role="group" aria-label="Default button group">
                        <button type="button" class="btn btn-primary-600 px-20 py-11 radius-8">Left</button>
                        <button type="button" class="btn btn-primary-600 px-20 py-11">Middle</button>
                        <button type="button" class="btn btn-primary-600 px-20 py-11 radius-8">Right</button>
                    </div>

                    <div class="btn-group radius-8" role="group" aria-label="Default button group">
                        <button type="button" class="btn btn-primary-600 px-20 py-11 radius-50">Left</button>
                        <button type="button" class="btn btn-primary-600 px-20 py-11">Middle</button>
                        <button type="button" class="btn btn-primary-600 px-20 py-11 radius-50">Right</button>
                    </div>

                    <div class="btn-group" role="group" aria-label="Default button group">
                        <button type="button" class="btn btn-light-100 px-20 py-13 radius-8 text-dark d-flex">
                            <iconify-icon icon="heroicons:bars-3-bottom-left-16-solid" class="text-xl"></iconify-icon>
                        </button>
                        <button type="button" class="btn btn-light-100 px-20 py-13 radius-8 text-dark d-flex">
                            <iconify-icon icon="fe:bar" class="text-xl"></iconify-icon>
                        </button>
                        <button type="button" class="btn btn-light-100 px-20 py-13 radius-8 text-dark d-flex">
                            <iconify-icon icon="heroicons:bars-3-bottom-right-16-solid" class="text-xl"></iconify-icon>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card h-100 p-0">
                <div class="card-header border-bottom bg-base py-16 px-24">
                    <h6 class="text-lg fw-semibold mb-0">Buttons Group</h6>
                </div>
                <div class="card-body p-24">
                    <button type="button" class="btn btn-primary-600 radius-8 px-20 py-11">Custom Button</button>
                </div>
            </div>
        </div>

    </div>
    
@endsection