refactor: alert examples updated to use FwbButton

Refactor alert examples to use `FwbButton`

Author: Sqrcz

docs/components/alert.md

@@ -227,37 +227,40 @@ The following alert components can be used if you wish to disclose more informat
         More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
       </div>
       <div class="flex">
-        <button
-          type="button"
-          class="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        <fwb-button
+          color="blue"
+          size="sm"
+          class="mr-2 inline-flex items-center"
         >
-          <svg
-            class="-ml-0.5 mr-2 h-3 w-3"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="currentColor"
-            viewBox="0 0 20 14"
-          >
-            <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
-          </svg>
+          <template #prefix>
+            <svg
+              class="size-3"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 20 14"
+            >
+              <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
+            </svg>
+          </template>
           View more
-        </button>
-        <button
-          type="button"
-          class="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800"
+        </fwb-button>
+        <fwb-button
+          size="sm"
+          outline
           data-dismiss-target="#alert-additional-content-1"
           aria-label="Close"
           @click="onCloseClick"
         >
           Dismiss
-        </button>
+        </fwb-button>
       </div>
     </template>
   </fwb-alert>
 </template>
 
 <script setup>
-import { FwbAlert } from 'flowbite-vue'
+import { FwbAlert, FwbButton } from 'flowbite-vue'
 </script>
 ```
 

docs/components/alert/examples/FwbAlertExampleCustomContent.vue

@@ -23,36 +23,41 @@
           More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
         </div>
         <div class="flex">
-          <button
-            type="button"
-            class="mr-2 inline-flex items-center rounded-lg bg-blue-800 px-3 py-1.5 text-center text-xs font-medium text-white hover:bg-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-200 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          <fwb-button
+            color="blue"
+            size="sm"
+            class="mr-2 inline-flex items-center"
           >
-            <svg
-              class="-ml-0.5 mr-2 size-3"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 20 14"
-            >
-              <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
-            </svg>
+            <template #prefix>
+              <svg
+                class="size-3"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 20 14"
+              >
+                <path
+                  d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"
+                />
+              </svg>
+            </template>
             View more
-          </button>
-          <button
-            type="button"
-            class="rounded-lg border border-blue-800 bg-transparent px-3 py-1.5 text-center text-xs font-medium text-blue-800 hover:bg-blue-900 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-200 dark:border-blue-600 dark:text-blue-400 dark:hover:bg-blue-600 dark:hover:text-white dark:focus:ring-blue-800"
+          </fwb-button>
+          <fwb-button
+            size="sm"
+            outline
             data-dismiss-target="#alert-additional-content-1"
             aria-label="Close"
             @click="onCloseClick"
           >
             Dismiss
-          </button>
+          </fwb-button>
         </div>
       </template>
     </fwb-alert>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { FwbAlert } from '../../../../src/index'
+import { FwbAlert, FwbButton } from '../../../../src/index'
 </script>