From 31aec5ce561af3f0da12bafab9497d5227a24a28 Mon Sep 17 00:00:00 2001
From: MohamadSalman11 <hamudesalman69@gmail.com>
Date: Mon, 3 Feb 2025 13:24:47 +0100
Subject: [PATCH] feat: add live alert type selection

---
 site/assets/js/partials/snippets.js        |  4 +++-
 site/content/docs/5.3/components/alerts.md | 12 ++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/site/assets/js/partials/snippets.js b/site/assets/js/partials/snippets.js
index 498071b415a2..be7684ee9670 100644
--- 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
index 8e3d99f537ab..3aae86ce2bd9 100644
--- 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: