Buttons

Primary button for some main action button

                                
<div class="dropdown pe-2">
  <button class="btn btn-primary dropdown-toggle" type="button" id="ddBtncreate" data-bs-toggle="dropdown"
    aria-expanded="false">Create</button>
  <ul class="dropdown-menu" aria-labelledby="ddBtncreate">
    <li><a class="dropdown-item" href="#!">Page 1</a></li>
    <li><a class="dropdown-item" href="#!">Page 2</a></li>
  </ul>
</div>
<button type="button" class="btn btn-primary">Compose</button>
<button type="button" class="btn btn-primary">Reply</button>
<button type="button" class="btn btn-primary">Add</button>
                                
                                
Secondary button for other action button

                                  
<div class="dropdown pe-2">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="ddBtnMove" data-bs-toggle="dropdown"
    aria-expanded="false">Move To</button>
  <ul class="dropdown-menu" aria-labelledby="ddBtnMove">
    <li class="aInTrays" style="display:none"><a class="dropdown-item" href="#">In Trays </a></li>
    <li class="aOutTrays"><a class="dropdown-item" href="#">Out Trays </a></li>
    <li class="aWorkingTrays"><a class="dropdown-item" href="#">Working Trays </a></li>
    <li class="aPendingTrays"><a class="dropdown-item" href="#">Pending Trays</a></li>
  </ul>
</div>
                                  
                                  
Buttons for forms or tables main function

                                  
<button type="button" class="btn btn-success">Details</button>
<button type="button" class="btn btn-success">Next</button>
<button type="button" class="btn btn-success">Send</button>
<button type="button" class="btn btn-success">Save as Draft</button>
<button type="button" class="btn btn-success">Save</button>
<button type="button" class="btn btn-success">Search</button>
<button type="button" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-success">Submit to HA</button>
                                  
                                  
Delete Buttons

                                  
<button type="button" class="btn btn-danger">Delete</button>
                                  
                                  
Info Buttons for all of Information function (Search, Link, Print)

                                  
<button type="button" class="col-2 btn btn-info">Clear</button>
<button type="button" class="btn btn-info">Link To</button>
<button type="button" class="btn btn-info">Search and Link</button>
<button type="button" class="col-2 btn btn-info">Print</button>
<button type="button" class="col-2 btn btn-info">Reset</button>
                                  
                                  
Outline style button for icon button

                                
<button type="button" class="btn btn-outline-info"><i class="fa-solid fa-magnifying-glass"></i></button>
<button type="button" class="btn btn-outline-info"><i class="fa-solid fa-print"></i></button>
                                
                                
Gray Button (Back, Close, Cancel)

                                
<button type="button" class="col-2 btn btn-gray">Back</button>
<button type="button" class="btn btn-gray">Close</button>
<button type="button" class="btn btn-gray">Cancel</button>
                                
                                
Disabled Button

                                
<button type="button" class="col-2 btn btn-success" disabled>Send</button>
<button type="button" class="col-2 btn btn-danger" disabled>Delete</button>