allow custom colors

demo.html

@@ -53,13 +53,13 @@ <h1>Demo</h1>
       </div>
       <div class="row mb-3 g-3">
         <div class="col-md-4">
-          <label for="validationTagsShow" class="form-label">Tags (show all)</label>
+          <label for="validationTagsShow" class="form-label">Tags (show all + custom colors)</label>
           <select class="form-select" id="validationTagsShow" name="tags_show[]" multiple data-show-all-suggestions="true">
             <option disabled hidden value="">Choose a tag...</option>
             <option value="1" selected="selected">Apple</option>
-            <option value="2">Banana</option>
-            <option value="3">Orange</option>
-            <option value="4">Blueberry</option>
+            <option value="2" data-badge-style="success" selected="selected">Banana</option>
+            <option value="3" data-badge-style="warning" data-badge-class="text-dark">Orange</option>
+            <option value="4" data-badge-style="secondary">Blueberry</option>
             <option value="5">Strawberry</option>
             <option value="6">Cranberry</option>
             <option value="7">Huckleberry</option>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap5-tags",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Replace select[multiple] with nices badges",
   "main": "tags",
   "scripts": {

tags.js

@@ -477,14 +477,21 @@ class Tags {
     // create span
     let html = text;
     let span = document.createElement("span");
+    let badgeStyle = this.badgeStyle;
     span.classList.add("badge");
+    if (opt.dataset.badgeStyle) {
+      badgeStyle = opt.dataset.badgeStyle;
+    }
+    if (opt.dataset.badgeClass) {
+      span.classList.add(opt.dataset.badgeClass);
+    }
     if (bver === 5) {
       //https://getbootstrap.com/docs/5.1/components/badge/
-      span.classList.add("bg-" + this.badgeStyle);
+      span.classList.add("bg-" + badgeStyle);
       span.classList.add("me-2");
     } else {
       // https://getbootstrap.com/docs/4.6/components/badge/
-      span.classList.add("badge-" + this.badgeStyle);
+      span.classList.add("badge-" + badgeStyle);
       span.classList.add("mr-2");
     }
     span.setAttribute(VALUE_ATTRIBUTE, value);