<div class="container">
  <div class="row">
   <div class="rt-mb-30 col-xxl-4 col-xl-6 col-md-6">
       <div class="card">
           <div class="card-body">
            <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-primary</span>
                <button type="button" class="btn bg-primary-500 text-white pill">Button</button>
                <button type="button" class="btn bg-primary-600 text-white pill">Button</button>
                <button type="button" class="btn bg-primary-50 text-primary-300 pill" disabled>Button</button>
                <button type="button" class="btn bg-gray-900 text-white pill">Button</button>
                <button type="button" class="btn bg-gray-800 text-white pill">Button</button>
                <button type="button" class="btn bg-gray-50 text-gray-300 pill" disabled>Button</button>
                <button type="button" class="btn bg-secondary-500 text-gray-900 pill">Button</button>
                <button type="button" class="btn bg-secondary-600 text-gray-900 pill">Button</button>
                <button type="button" class="btn bg-secondary-200 text-gray-500 pill" disabled>Button</button>
                <button type="button" class="btn bg-success-500 text-white pill">Button</button>
                <button type="button" class="btn bg-success-600 text-white pill">Button</button>
                <button type="button" class="btn bg-success-50 text-success-300 pill" disabled>Button</button>
                <button type="button" class="btn bg-warning-500 text-white pill">Button</button>
                <button type="button" class="btn bg-warning-600 text-white pill">Button</button>
                <button type="button" class="btn bg-warning-50 text-warning-300 pill" disabled>Button</button>
                <button type="button" class="btn bg-danger-500 text-white pill">Button</button>
                <button type="button" class="btn bg-danger-600 text-white pill">Button</button>
                <button type="button" class="btn bg-danger-50 text-danger-300 pill" disabled>Button</button>
           </div>
           <!-- <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-primary-50</span>
                <button type="button" class="btn btn-primary-50">Button</button>
                <button type="button" class="btn btn-primary-50" disabled>Button</button>
           </div>
           <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-outline-primary</span>
                <button type="button" class="btn btn-outline-primary">Button</button>
                <button type="button" class="btn btn-outline-primary" disabled>Button</button>
           </div> -->
           </div>
       </div>
   </div>
   <div class="rt-mb-30 col-xxl-4 col-xl-6 col-md-6">
      <div class="card">
          <div class="card-body">
                <span class="body-font-3 ft-wt-6 d-block mb-10">Button with Icon</span>
                <button type="button" class="btn bg-primary-500 text-white pill">
                    <span class="button-content-wrapper">
                        <span class="button-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5 12H19" stroke="white" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M12 5L19 12L12 19" stroke="white" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </span>
                        <span class="button-text">
                            Icon Left
                        </span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary">
                    <span class="button-content-wrapper ">
                        <span class="button-icon align-icon-right">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5 12H19" stroke="white" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M12 5L19 12L12 19" stroke="white" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </span>
                        <span class="button-text">
                            Icon Right
                        </span>
                    </span>
                </button>
          </div>
      </div>
   </div>
   <div class="rt-mb-30 col-xxl-4 col-xl-6 col-md-6">
       <div class="card">
           <div class="card-body">
            <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-success</span>
                <button type="button" class="btn btn-success">Button</button>
                <button type="button" class="btn btn-success" disabled>Button</button>
           </div>
           <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-success-50</span>
                <button type="button" class="btn btn-success-50">Button</button>
                <button type="button" class="btn btn-success-50" disabled>Button</button>
           </div>
           <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-outline-success</span>
                <button type="button" class="btn btn-outline-success">Button</button>
                <button type="button" class="btn btn-outline-success" disabled>Button</button>
           </div>
           </div>
       </div>
   </div>
   <div class="rt-mb-30 col-xxl-4 col-xl-6 col-md-6">
       <div class="card">
           <div class="card-body">
            <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-warning</span>
                <button type="button" class="btn btn-warning">Button</button>
                <button type="button" class="btn btn-warning" disabled>Button</button>
           </div>
           <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-warning-50</span>
                <button type="button" class="btn btn-warning-50">Button</button>
                <button type="button" class="btn btn-warning-50" disabled>Button</button>
           </div>
           <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-outline-warning</span>
                <button type="button" class="btn btn-outline-warning">Button</button>
                <button type="button" class="btn btn-outline-success" disabled>Button</button>
           </div>
           </div>
       </div>
   </div>
   <div class="rt-mb-30 col-xxl-4 col-xl-6 col-md-6">
       <div class="card">
           <div class="card-body">
            <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-danger</span>
                <button type="button" class="btn btn-danger">Button</button>
                <button type="button" class="btn btn-danger" disabled>Button</button>
           </div>
           <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-danger-50</span>
                <button type="button" class="btn btn-danger-50">Button</button>
                <button type="button" class="btn btn-danger-50" disabled>Button</button>
           </div>
           <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">btn-outline-danger</span>
                <button type="button" class="btn btn-outline-danger">Button</button>
                <button type="button" class="btn btn-outline-danger" disabled>Button</button>
           </div>
           </div>
       </div>
   </div>
   <div class="rt-mb-30 col-xxl-4 col-xl-6 col-md-6">
       <div class="card">
           <div class="card-body">
            <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-0">Button Sizes</span>
                <button type="button" class="btn btn-primary">Medium</button>
                <button type="button" class="btn btn-primary btn-lg">Large</button> 
           </div>
            <div class="buttonList">
                <span class="body-font-3 ft-wt-6 d-block mb-10">full Width</span>
                <button type="button" class="btn btn-primary d-block">Button</button>
           </div>
           <div class="buttonList">
            <span class="body-font-3 ft-wt-6 d-block mb-10">Button with Icon</span>
            <button type="button" class="btn btn-primary">
                <span class="button-content-wrapper">
                    <span class="button-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5 12H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M12 5L19 12L12 19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>                            
                    </span>
                    <span class="button-text">
                        Icon Left
                    </span>
                </span>
            </button>
            <button type="button" class="btn btn-primary">
                <span class="button-content-wrapper ">
                    <span class="button-icon align-icon-right">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5 12H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M12 5L19 12L12 19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>                            
                    </span>
                    <span class="button-text">
                        Icon Right 
                    </span>
                </span>
            </button>
            </div>
           </div>
       </div>
   </div>
  </div>
</div>


