283 lines
20 KiB
PHP
283 lines
20 KiB
PHP
@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
|