#### Badges

##### Basic Badges

Primary Secondary Success Danger Warning Info Light Dark

                           <div class="d-flex gap-2 flex-wrap">
                            <span class="badge text-bg-primary">Primary</span>
                            <span class="badge text-bg-secondary">Secondary</span>
                            <span class="badge text-bg-success">Success</span>
                            <span class="badge text-bg-danger">Danger</span>
                            <span class="badge text-bg-warning">Warning</span>
                            <span class="badge text-bg-info">Info</span>
                            <span class="badge text-bg-light">Light</span>
                            <span class="badge text-bg-dark">Dark</span>
                            </div>

##### Outline Badges

Primary Secondary Success Danger Warning Info Dark

                            <div class="d-flex gap-2 flex-wrap">
                             <span class="badge text-outline-primary">Primary</span>
                             <span class="badge text-outline-secondary">Secondary</span>
                             <span class="badge text-outline-success">Success</span>
                             <span class="badge text-outline-danger">Danger</span>
                             <span class="badge text-outline-warning">Warning</span>
                             <span class="badge text-outline-info">Info</span>
                             <span class="badge text-outline-dark">Dark</span>
                             </div>

##### Light Badges

Primary Secondary Success Danger Warning Info Dark

             <div class="d-flex gap-2 flex-wrap">
               <span class="badge text-light-primary"> <i class="ti ti-download me-1"></i>Primary</span>
               <span class="badge text-light-secondary">Secondary</span>
               <span class="badge text-light-success">Success</span>
               <span class="badge text-light-danger">Danger</span>
               <span class="badge text-light-warning">Warning</span>
               <span class="badge text-light-info">Info</span>
               <span class="badge text-light-dark">Dark</span>
             </div>

##### Radius option on Badges

Primary Secondary Success Danger

                           <div class="d-flex gap-2 flex-wrap">
                               <span class="badge text-bg-primary b-r-0">Primary</span>
                               <span class="badge text-bg-secondary b-r-6">Secondary</span>
                               <span class="badge text-bg-success b-r-8">Success</span>
                               <span class="badge text-bg-danger b-r-10">Danger</span>
                            </div>

##### Badges position

                       <div class="d-flex gap-3 flex-wrap">
                            <button type="button" class="btn btn-outline-danger position-relative">
                               Offline
                               <span
                                 class="position-absolute top-0 start-0 translate-middle p-1 bg-danger border border-light rounded-circle">
                                 <span class="visually-hidden">Offline</span>
                               </span>
                            </button>

                            <button type="button" class="btn btn-outline-warning position-relative">
                               Busy
                               <span
                                 class="position-absolute top-0 start-100 translate-middle p-1 bg-warning border border-light rounded-circle">
                                 <span class="visually-hidden">Busy</span>
                               </span>
                            </button>

                            <button type="button" class="btn btn-outline-success position-relative">
                               Online
                               <span
                                 class="position-absolute top-100 start-0 translate-middle p-1 bg-success border border-light rounded-circle">
                                 <span class="visually-hidden">Online</span>
                               </span>
                            </button>

                            <button type="button" class="btn btn-outline-secondary position-relative">
                               Disable
                               <span
                                 class="position-absolute top-100 start-100 translate-middle p-1 bg-secondary border border-light rounded-circle">
                                 <span class="visually-hidden">Disable</span>
                               </span>
                            </button>
                       </div>

##### Icon's badges

         <div class="d-flex gap-3 flex-wrap">
              <button type="button" class="btn btn-outline-danger position-relative">
                 Offline
                 <span
                   class="position-absolute top-0 start-0 translate-middle p-1 bg-danger border border-light rounded-circle">
                   <span class="visually-hidden">Offline</span>
                 </span>
              </button>

              <button type="button" class="btn btn-outline-warning position-relative">
                 Busy
                 <span
                   class="position-absolute top-0 start-100 translate-middle p-1 bg-warning border border-light rounded-circle">
                   <span class="visually-hidden">Busy</span>
                 </span>
              </button>

              <button type="button" class="btn btn-outline-success position-relative">
                 Online
                 <span
                   class="position-absolute top-100 start-0 translate-middle p-1 bg-success border border-light rounded-circle">
                   <span class="visually-hidden">Online</span>
                 </span>
              </button>

              <button type="button" class="btn btn-outline-secondary position-relative">
                 Disable
                 <span
                   class="position-absolute top-100 start-100 translate-middle p-1 bg-secondary border border-light rounded-circle">
                   <span class="visually-hidden">Disable</span>
                 </span>
              </button>
         </div>

##### Badges with button

                        <div class="d-flex gap-4 flex-wrap">
                             <button type="button" class="btn btn-light-primary">
                               Notifications <span class="badge text-bg-primary badge-notification">4</span>
                             </button>

                             <button type="button" class="btn btn-light-secondary position-relative">
                              Disable
                              <span
                                class="position-absolute top-0 start-100 translate-middle p-2 bg-secondary border border-light rounded-circle">
                                <span class="visually-hidden">Disable</span>
                              </span>
                             </button>

                             <button type="button" class="btn btn-light-success position-relative">
                               Inbox
                               <span
                                 class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success badge-notification">
                                 99+
                                 <span class="visually-hidden">unread messages</span>
                               </span>
                             </button>

                             <button type="button" class="btn btn-light-danger position-relative">
                               Unread

                               <span
                                 class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger badge-notification">
                                 <i class="ti ti-bell-ringing"></i>
                               </span>
                             </button>

                             <button type="button" class="btn btn-outline-warning position-relative">
                               Inbox
                               <span class="badge rounded-pill bg-warning badge-notification">
                                 99+
                                 <span class="visually-hidden">unread messages</span>
                               </span>
                             </button>

                             <button type="button" class="btn btn-light-info position-relative f-s-14">
                               <b>50%</b> Off
                               <span
                                 class="position-absolute top-0 start-100 translate-middle bg-info b-r-6 badge-notification p-1 f-s-12">
                                 New
                               </span>
                             </button>

                             <button type="button" class="btn btn-light-dark position-relative">
                               <b> 1 </b> missed call
                               <span
                                 class="position-absolute top-0 start-100 translate-middle p-2 bg-dark border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower">
                                 <span class="visually-hidden">Busy</span>
                               </span>
                                                 </button>

                        </div>

##### Radius Badges

# Heading New

                        <div class="">
                                <h1 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h1>
                                <h2 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h2>
                                <h3 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h3>
                                <h4 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h4>
                                <h5 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h5>
                                <h6 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h6>
                          </div>