<div class="app-btn-list d-flex gap-2 flex-wrap">
    <button class="btn btn-gradient-primary" type="button">Primary</button>
    <button class="btn btn-gradient-secondary" type="button">Secondary</button>
    <button class="btn btn-gradient-success" type="button">Success</button>
    <button class="btn btn-gradient-danger" type="button">Danger</button>
    <button class="btn btn-gradient-warning" type="button">Warning</button>
    <button class="btn btn-gradient-info" type="button">Info</button>
    <button class="btn btn-gradient-light" type="button">Light</button>
    <button class="btn btn-gradient-dark" type="button">Dark</button>
    <button class="btn btn-gradient-link" type="button">Link</button>
</div>

                                
                              

                                
                                  <div class="app-btn-list d-flex gap-2 flex-wrap">
    <button class="btn btn-primary" type="button">Primary</button>
    <button class="btn btn-secondary" type="button">Secondary</button>
    <button class="btn btn-success" type="button">Success</button>
    <button class="btn btn-danger" type="button">Danger</button>
    <button class="btn btn-warning" type="button">Warning</button>
    <button class="btn btn-info" type="button">Info</button>
    <button class="btn btn-light" type="button">Light</button>
    <button class="btn btn-dark" type="button">Dark</button>
    <button class="btn btn-link" type="button">Link</button>
</div>

                                
                              

                                
       <div class="app-btn-list d-flex gap-2 flex-wrap">
    <button class="btn btn-light-primary" type="button">Primary</button>
    <button class="btn btn-light-secondary" type="button">Secondary</button>
    <button class="btn btn-light-success" type="button">Success</button>
    <button class="btn btn-light-danger" type="button">Danger</button>
    <button class="btn btn-light-warning" type="button">Warning</button>
    <button class="btn btn-light-info" type="button">Info</button>
    <button class="btn btn-light-light" type="button">Light</button>
    <button class="btn btn-light-dark" type="button">Dark</button>
    <button class="btn btn-light-link" type="button">Link</button>
</div>

                                
                              

                                
 <div class="app-btn-list d-flex gap-2 flex-wrap">
    <button class="btn btn-outline-primary" type="button">Primary</button>
    <button class="btn btn-outline-secondary" type="button">Secondary</button>
    <button class="btn btn-outline-success" type="button">Success</button>
    <button class="btn btn-outline-danger" type="button">Danger</button>
    <button class="btn btn-outline-warning" type="button">Warning</button>
    <button class="btn btn-outline-info" type="button">Info</button>
    <button class="btn btn-outline-light" type="button">Light</button>
    <button class="btn btn-outline-dark" type="button">Dark</button>
    <button class="btn btn-outline-link" type="button">Link</button>
</div>

                                
                              

                                
     <div class="col-lg-6 col-12 app-btn-list">
    <button class="btn btn-outline-primary d-inline-flex-center" type="button">
        <span aria-hidden="true" class="spinner-border spinner-border-sm me-2" role="status"></span>
        Loading...
    </button>

    <button class="btn btn-outline-info icon-btn" type="button">
        <span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
        <span class="visually-hidden">Loading...</span>
    </button>

    <button class="btn btn-outline-dark icon-btn" type="button">
        <span aria-hidden="true" class="spinner-grow spinner-grow-sm" role="status"></span>
        <span class="visually-hidden">Loading...</span>
    </button>
</div>

<div class="col-lg-6 col-12 app-btn-list">
    <button class="btn btn-light-primary d-inline-flex-center" type="button">
        <span aria-hidden="true" class="spinner-border spinner-border-sm me-2" role="status"></span>
        Loading...
    </button>

    <button class="btn btn-light-info icon-btn" type="button">
        <span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
        <span class="visually-hidden">Loading...</span>
    </button>

    <button class="btn btn-light-dark icon-btn" type="button">
        <span aria-hidden="true" class="spinner-grow spinner-grow-sm" role="status"></span>
        <span class="visually-hidden">Loading...</span>
    </button>
</div>

                                
                              

                                
  <div class="app-btn-list d-flex gap-2 flex-wrap">
    <button class="btn btn-light-primary btn-xxl" type="button">
        <i class="ti ti-download"></i> Primary
    </button>

    <button class="btn btn-light-primary btn-xl" type="button">
        <i class="ti ti-download"></i> Primary
    </button>

    <button class="btn btn-light-secondary btn-lg" type="button">
        Secondary <i class="ti ti-butterfly"></i>
    </button>

    <button class="btn btn-light-success" type="button">
        <i class="ti ti-award"></i> Success
    </button>

    <button class="btn btn-light-danger btn-sm" type="button">
        <i class="ti ti-power"></i> Danger
    </button>

    <button class="btn btn-light-warning btn-xs" type="button">
        <i class="ti ti-alert-triangle"></i> Warning
    </button>
</div>

                                
                              

                                
  <div class="col-md-6 app-btn-list">
    <button class="btn btn-primary" type="button">
        <i class="ti ti-download"></i> Primary
    </button>
    <button class="btn btn-outline-secondary d-lg-inline-flex align-items-center" type="button">
        Secondary <i class="ti ti-alert-triangle m-s-3"></i>
    </button>
</div>

<div class="col-md-6 app-btn-list">
    <button class="btn btn-outline-primary" type="button">
        <i class="ti ti-download"></i> Primary
    </button>
    <button class="btn btn-outline-secondary d-lg-inline-flex align-items-center" type="button">
        Secondary <i class="ti ti-alert-triangle m-s-3"></i>
    </button>
</div>

<div class="col-md-6 app-btn-list mg-t-10">
    <button class="btn btn-light-primary" type="button">
        <i class="ti ti-download"></i> Primary
    </button>
    <button class="btn btn-light-secondary d-lg-inline-flex align-items-center" type="button">
        Secondary <i class="ti ti-alert-triangle m-s-3"></i>
    </button>
</div>

<div class="col-md-6 app-btn-list mg-t-10">
    <button class="btn btn-gradient-primary icon-btn b-r-4" type="button"><i class="ti ti-capture"></i></button>
    <button class="btn btn-gradient-secondary icon-btn b-r-4" type="button"><i class="ti ti-bell-ringing"></i></button>
    <button class="btn btn-outline-primary icon-btn b-r-4" type="button"><i class="ti ti-capture"></i></button>
    <button class="btn btn-outline-secondary icon-btn b-r-4" type="button"><i class="ti ti-bell-ringing"></i></button>
    <button class="btn btn-light-primary icon-btn b-r-4" type="button"><i class="ti ti-capture"></i></button>
    <button class="btn btn-light-secondary icon-btn b-r-4" type="button"><i class="ti ti-bell-ringing"></i></button>
</div>