From 6da50da0338084bb5bffc9aa7f1eca1acb8ff782 Mon Sep 17 00:00:00 2001
From: "David W. Gray" <dwgray67@hotmail.com>
Date: Wed, 2 Apr 2025 19:05:41 -0700
Subject: [PATCH] docs(BButton): Outline variant example

---
 apps/docs/src/docs/components/button.md         | 17 +----------------
 .../components/demo/ButtonOutlineVariants.vue   | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 16 deletions(-)
 create mode 100644 apps/docs/src/docs/components/demo/ButtonOutlineVariants.vue

diff --git a/apps/docs/src/docs/components/button.md b/apps/docs/src/docs/components/button.md
index 5c8f04023..e4c12b3f4 100644
--- a/apps/docs/src/docs/components/button.md
+++ b/apps/docs/src/docs/components/button.md
@@ -56,22 +56,7 @@ remove all background images and colors on any `BButton`:
 `outline-primary`, `outline-secondary`, `outline-success`, `outline-danger`, `outline-warning`,
 `outline-info`, `outline-light` and `outline-dark`.
 
-<HighlightCard>
-  <template #html>
-
-```vue-html
-<BButton variant="outline-primary">Primary</BButton>
-<BButton variant="outline-secondary">Secondary</BButton>
-<BButton variant="outline-success">Success</BButton>
-<BButton variant="outline-danger">Danger</BButton>
-<BButton variant="outline-warning">Warning</BButton>
-<BButton variant="outline-info">Info</BButton>
-<BButton variant="outline-light">Light</BButton>
-<BButton variant="outline-dark">Dark</BButton>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/ButtonOutlineVariants.vue#template{vue-html}
 
 ### Link variant
 
diff --git a/apps/docs/src/docs/components/demo/ButtonOutlineVariants.vue b/apps/docs/src/docs/components/demo/ButtonOutlineVariants.vue
new file mode 100644
index 000000000..9f6c6e425
--- /dev/null
+++ b/apps/docs/src/docs/components/demo/ButtonOutlineVariants.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="d-flex gap-2">
+    <!-- #region template -->
+    <BButton variant="outline-primary">Primary</BButton>
+    <BButton variant="outline-secondary">Secondary</BButton>
+    <BButton variant="outline-success">Success</BButton>
+    <BButton variant="outline-danger">Danger</BButton>
+    <BButton variant="outline-warning">Warning</BButton>
+    <BButton variant="outline-info">Info</BButton>
+    <BButton variant="outline-light">Light</BButton>
+    <BButton variant="outline-dark">Dark</BButton>
+    <!-- #endregion template -->
+  </div>
+</template>