feat: add live alert type selection

twbs · Feb 3, 2025 · 31aec5c · 31aec5c
1 parent 5708adc
commit 31aec5c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/site/assets/js/partials/snippets.js b/site/assets/js/partials/snippets.js
@@ -90,9 +90,11 @@ export default () => {
   }
 
   const alertTrigger = document.getElementById('liveAlertBtn')
+  const selectAlertType = document.getElementById('liveAlertType')
   if (alertTrigger) {
     alertTrigger.addEventListener('click', () => {
-      appendAlert('Nice, you triggered this alert message!', 'success')
+      const alertType = selectAlertType.value
+      appendAlert('Nice, you triggered this alert message!', alertType)
     })
   }
   // js-docs-end live-alert

diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md
@@ -33,7 +33,19 @@ Click the button below to show an alert (hidden with inline styles to start), th
 
 {{< example stackblitz_add_js="true" >}}
 <div id="liveAlertPlaceholder"></div>
+<div class="d-flex align-items-center gap-2">
 <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
+<select id="liveAlertType" class="form-select w-auto d-inline-block">
+  <option value="primary">Primary</option>
+  <option value="secondary">Secondary</option>
+  <option value="success" selected>Success</option>
+  <option value="danger">Danger</option>
+  <option value="warning">Warning</option>
+  <option value="info">Info</option>
+  <option value="light">Light</option>
+  <option value="dark">Dark</option>
+</select>
+</div>
 {{< /example >}}
 
 We use the following JavaScript to trigger our live alert demo: