Bizlyt - Bootstrap 5 Premium Admin & Dashboard Template

Default Buttons

<div class="btn-list">
    <button type="button" class="btn btn-primary btn-wave">Primary</button>
    <button type="button" class="btn btn-secondary btn-wave">Secondary</button>
    <button type="button" class="btn btn-success btn-wave">Success</button>
    <button type="button" class="btn btn-danger btn-wave">Danger</button>
    <button type="button" class="btn btn-warning btn-wave">Warning</button>

</div>

Rounded Buttons

<div class="btn-list">
    <button type="button" class="btn btn-primary rounded-pill btn-wave">Primary</button>
    <button type="button" class="btn btn-secondary rounded-pill btn-wave">Secondary</button>
    <button type="button" class="btn btn-success rounded-pill btn-wave">Success</button>
    <button type="button" class="btn btn-danger rounded-pill btn-wave">Danger</button>
    <button type="button" class="btn btn-warning rounded-pill btn-wave">Warning</button>

</div>

Light Buttons

<div class="btn-list">
    <button type="button" class="btn btn-primary-light btn-wave">Primary</button>
    <button type="button" class="btn btn-secondary-light btn-wave">Secondary</button>
    <button type="button" class="btn btn-success-light btn-wave">Success</button>
    <button type="button" class="btn btn-danger-light btn-wave">Danger</button>
    <button type="button" class="btn btn-warning-light btn-wave">Warning</button>
</div>

Light Rounded Buttons

<div class="btn-list">
    <button type="button" class="btn btn-primary-light rounded-pill btn-wave">Primary</button>
    <button type="button" class="btn btn-secondary-light rounded-pill btn-wave">Secondary</button>
    <button type="button" class="btn btn-success-light rounded-pill btn-wave">Success</button>
    <button type="button" class="btn btn-danger-light rounded-pill btn-wave">Danger</button>
    <button type="button" class="btn btn-warning-light rounded-pill btn-wave">Warning</button>
</div>

Outline Buttons

<div class="btn-list">
    <button type="button" class="btn btn-outline-primary btn-wave">Primary</button>
    <button type="button" class="btn btn-outline-secondary btn-wave">Secondary</button>
    <button type="button" class="btn btn-outline-success btn-wave">Success</button>
    <button type="button" class="btn btn-outline-info btn-wave">Info</button>
</div>

Rounded Outline Buttons

<div class="btn-list">
    <button type="button" class="btn btn-outline-primary rounded-pill btn-wave">Primary</button>
    <button type="button" class="btn btn-outline-secondary rounded-pill btn-wave">Secondary</button>
    <button type="button" class="btn btn-outline-success rounded-pill btn-wave">Success</button>
    <button type="button" class="btn btn-outline-danger rounded-pill btn-wave">Danger</button>
    <button type="button" class="btn btn-outline-warning rounded-pill btn-wave">Warning</button>
</div>

disabled state with anchor tags

Primary link Link

<div class="btn-list">
    <div class="mb-4">
        <button type="button" class="btn btn-primary" disabled="">Primary
            button</button>
        <button type="button" class="btn btn-secondary" disabled="">Button</button>
        <button type="button" class="btn btn-outline-primary" disabled="">Primary
            button</button>
        <button type="button" class="btn btn-outline-secondary" disabled="">Button</button>
    </div>

    <div>
        <a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary
            link</a>
        <a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
    </div>
</div>

button plugin toggle states

Toggle link Active toggle link Disabled toggle link

<div class="btn-list">
    <div class="mb-4">
        <button type="button" class="btn btn-primary btn-wave" data-bs-toggle="button"
            >Toggle button</button>
        <button type="button" class="btn btn-secondary active btn-wave" data-bs-toggle="button"
             aria-pressed="true">Active toggle button</button>
        <button type="button" class="btn btn-teal btn-wave" disabled data-bs-toggle="button"
            >Disabled toggle
            button</button>
    </div>
    <div>
        <a href="#" class="btn btn-primary btn-wave" role="button" data-bs-toggle="button">Toggle
            link</a>
        <a href="#" class="btn btn-secondary active btn-wave" role="button" data-bs-toggle="button"
            aria-pressed="true">Active toggle link</a>
        <a class="btn btn-teal disabled btn-wave" aria-disabled="true" role="button"
            data-bs-toggle="button">Disabled toggle link</a>
    </div>
</div>

Link functionally caveat

Primary link Link

<div class="btn-list">
    <a class="btn btn-primary disabled" tabindex="-1" role="button"
        aria-disabled="true">Primary link</a>
    <a class="btn btn-secondary disabled" tabindex="-1" role="button"
        aria-disabled="true">Link</a>
</div>

Loading Buttons

<div class="btn-list d-md-flex flex-wrap">
    <button class="btn btn-primary btn-loader">
        <span class="me-2">Loading</span>
        <span class="loading"><i class="ri-loader-2-fill fs-16"></i></span>
    </button>
    <button class="btn btn-outline-secondary btn-loader">
        <span class="me-2">Loading</span>
        <span class="loading"><i class="ri-loader-2-fill fs-16"></i></span>
    </button>
    <button class="btn btn-info-transparent btn-loader">
        <span class="me-2">Loading</span>
        <span class="loading"><i class="ri-loader-4-line fs-16"></i></span>
    </button>
    <button class="btn btn-warning-transparent btn-loader">
        <span class="me-2">Loading</span>
        <span class="loading"><i class="ri-loader-5-line fs-16"></i></span>
    </button>
    <button class="btn btn-success btn-loader disabled">
        <span class="me-2">Disabled</span>
        <span class="loading"><i class="ri-refresh-line fs-16"></i></span>
    </button>
</div>

Sizes

<div class="btn-list">
    <button type="button" class="btn btn-primary btn-sm btn-wave">Small
        button</button>
    <button type="button" class="btn btn-secondary btn-wave">Default
        button</button>
    <button type="button" class="btn btn-success btn-lg btn-wave">Large
        button</button>
</div>

Button Widths

<div class="btn-list">
    <button type="button" class="btn btn-primary btn-w-xs btn-wave">XS</button>
    <button type="button" class="btn btn-secondary btn-w-sm btn-wave">SM</button>
    <button type="button" class="btn btn-warning btn-w-md btn-wave">MD</button>
    <button type="button" class="btn btn-info btn-w-lg btn-wave">LG</button>
</div>

Buttons With Different Shadows

<div class="btn-list d-flex">
    <div class="me-5">
        <button class="btn btn-primary shadow-sm btn-wave">Button</button>
        <button class="btn btn-primary shadow btn-wave">Button</button>
        <button class="btn btn-primary shadow-lg btn-wave">Button</button>
    </div>
    <div>
        <button class="btn btn-secondary btn-sm shadow-sm btn-wave">Button</button>
        <button class="btn btn-info shadow btn-wave">Button</button>
        <button class="btn btn-lg btn-success shadow-lg btn-wave">Button</button>
    </div>
</div>

Different Colored Buttons With Shadows

<div class="btn-list">
    <button class="btn btn-primary shadow-primary btn-wave">Button</button>
    <button class="btn btn-secondary shadow-secondary btn-wave">Button</button>
    <button class="btn btn-success shadow-success btn-wave">Button</button>
    <button class="btn btn-info shadow-info btn-wave">Button</button>
    <button class="btn btn-warning shadow-warning btn-wave">Button</button>
    <button class="btn btn-danger shadow-danger btn-wave">Button</button>
    <button class="btn btn-purple shadow-purple btn-wave">Button</button>
    <button class="btn btn-orange shadow-orange btn-wave">Button</button>
</div>

Raised Buttons

<div class="btn-list">
    <button class="btn btn-primary btn-raised-shadow btn-wave">Button</button>
    <button class="btn btn-secondary btn-raised-shadow btn-wave">Button</button>
    <button class="btn btn-success btn-raised-shadow btn-wave">Button</button>
    <button class="btn btn-info btn-raised-shadow btn-wave">Button</button>
    <button class="btn btn-warning btn-raised-shadow btn-wave">Button</button>
    <button class="btn btn-danger btn-raised-shadow btn-wave">Button</button>
    <button class="btn btn-purple btn-raised-shadow btn-wave">Button</button>
    <button class="btn btn-orange btn-raised-shadow btn-wave">Button</button>
</div>

Label Buttons

<div class="btn-list">
    <button class="btn btn-primary label-btn">
        <i class="ri-chat-smile-line label-btn-icon me-2"></i>
        Primary
    </button>
    <button class="btn btn-secondary label-btn">
        <i class="ri-settings-4-line label-btn-icon me-2"></i>
        Secondary
    </button>
    <button class="btn btn-warning label-btn rounded-pill">
        <i class="ri-spam-2-line label-btn-icon me-2 rounded-pill"></i>
        Warning
    </button>
    <button class="btn btn-info label-btn rounded-pill">
        <i class="ri-phone-line label-btn-icon me-2 rounded-pill"></i>
        Info
    </button>
    <button class="btn btn-success label-btn label-end">
        Success
        <i class="ri-thumb-up-line label-btn-icon ms-2"></i>
    </button>
    <button class="btn btn-danger label-btn label-end rounded-pill">
        Cancel
        <i class="ri-close-line label-btn-icon ms-2 rounded-pill"></i>
    </button>
</div>

Switcher

Alerts