<div
    class="badge bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
  >
    Default
  </div>
  <div class="badge bg-primary text-white dark:bg-accent">Primary</div>
  <div class="badge bg-secondary text-white">Secondary</div>
  <div class="badge bg-info text-white">Info</div>
  <div class="badge bg-success text-white">Success</div>
  <div class="badge bg-warning text-white">Warning</div>
  <div class="badge bg-error text-white">Error</div>
  <div class="badge bg-navy-700 text-white dark:bg-navy-900">Dark</div>
  <div class="badge bg-slate-150 text-slate-800">Light</div>

              

                
  <div
    class="badge rounded-full bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
  >
    Default
  </div>
  <div class="badge rounded-full bg-primary text-white dark:bg-accent">
    Primary
  </div>
  <div class="badge rounded-full bg-secondary text-white">Secondary</div>
  <div class="badge rounded-full bg-info text-white">Info</div>
  <div class="badge rounded-full bg-success text-white">Success</div>
  <div class="badge rounded-full bg-warning text-white">Warning</div>
  <div class="badge rounded-full bg-error text-white">Error</div>
  <div class="badge rounded-full bg-navy-700 text-white dark:bg-navy-900">
    Dark
  </div>
  <div class="badge rounded-full bg-slate-150 text-slate-800">Light</div>

              

                
  <div
    class="badge bg-slate-150 text-slate-800 shadow-soft shadow-slate-200/50 dark:bg-navy-500 dark:text-navy-100 dark:shadow-navy-450/50"
  >
    Default
  </div>
  <div
    class="badge bg-primary text-white shadow-soft shadow-primary/50 dark:bg-accent dark:shadow-accent/50"
  >
    Primary
  </div>
  <div class="badge bg-secondary text-white shadow-soft shadow-secondary/50">
    Secondary
  </div>
  <div class="badge bg-info text-white shadow-soft shadow-info/50">Info</div>
  <div class="badge bg-success text-white shadow-soft shadow-success/50">
    Success
  </div>
  <div class="badge bg-warning text-white shadow-soft shadow-warning/50">
    Warning
  </div>
  <div class="badge bg-error text-white shadow-soft shadow-error/50">Error</div>

              

                
  <div
    class="badge bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
  >
    Primary
  </div>
  <div
    class="badge bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light"
  >
    Secondary
  </div>
  <div class="badge bg-info/10 text-info dark:bg-info/15">Info</div>
  <div class="badge bg-success/10 text-success dark:bg-success/15">Success</div>
  <div class="badge bg-warning/10 text-warning dark:bg-warning/15">Warning</div>
  <div class="badge bg-error/10 text-error dark:bg-error/15">Error</div>

              

                
  <div
    class="badge rounded-full border border-slate-300 text-slate-800 dark:border-navy-450 dark:text-navy-50"
  >
    Default
  </div>
  <div
    class="badge rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
  >
    Primary
  </div>
  <div
    class="badge rounded-full border border-secondary text-secondary dark:border-secondary-light dark:text-secondary-light"
  >
    Secondary
  </div>
  <div class="badge rounded-full border border-info text-info">Info</div>
  <div class="badge rounded-full border border-success text-success">
    Success
  </div>
  <div class="badge rounded-full border border-warning text-warning">
    Warning
  </div>
  <div class="badge rounded-full border border-error text-error">Error</div>

              

                
  <div class="badge  space-x-2.5 text-slate-800 dark:text-navy-100">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Default</span>
  </div>
  <div class="badge  space-x-2.5 text-primary dark:text-accent-light">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Primary</span>
  </div>
  <div class="badge  space-x-2.5 text-secondary dark:text-secondary-light">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Primary</span>
  </div>
  <div class="badge  space-x-2.5 text-info">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Info</span>
  </div>
  <div class="badge  space-x-2.5 text-success">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Success</span>
  </div>
  <div class="badge  space-x-2.5 text-warning">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Warning</span>
  </div>
  <div class="badge  space-x-2.5 text-error">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Error</span>
  </div>

              

                
  <div
    class="badge  space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Primary</span>
  </div>
  <div
    class="badge  space-x-2.5 rounded-full bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Primary</span>
  </div>
  <div
    class="badge  space-x-2.5 rounded-full bg-info/10 text-info dark:bg-info/15"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Info</span>
  </div>
  <div
    class="badge  space-x-2.5 rounded-full bg-success/10 text-success dark:bg-success/15"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Success</span>
  </div>
  <div
    class="badge  space-x-2.5 rounded-full bg-warning/10 text-warning dark:bg-warning/15"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Warning</span>
  </div>
  <div
    class="badge  space-x-2.5 rounded-full bg-error/10 text-error dark:bg-error/15"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Error</span>
  </div>
              

                
  <div
    class="badge  space-x-2 bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
        clip-rule="evenodd"
      ></path>
    </svg>
    <span>Default</span>
  </div>
  <div class="badge  space-x-2 bg-primary text-white dark:bg-accent">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
      ></path>
    </svg>
    <span>Primary</span>
  </div>
  <div class="badge  space-x-2 bg-secondary text-white">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
        clip-rule="evenodd"
      ></path>
    </svg>
    <span>Secondary</span>
  </div>
  <div class="badge rounded-full bg-info text-white">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z"
      ></path>
    </svg>
  </div>
  <div class="badge bg-success text-white">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
        clip-rule="evenodd"
      ></path>
    </svg>
  </div>
  <div
    class="badge  space-x-2 bg-warning text-white shadow-soft shadow-warning/50"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-4 w-5"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
        clip-rule="evenodd"
      />
    </svg>
    <span>Warning</span>
  </div>
  <div class="badge  space-x-2 bg-error text-white">
    <span>Remove</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  </div>