feat: add gradient(monochrome, duotone), outline colored button. prefix and suffix slots button

docs/guide/button/examples/ButtonGradientMonochromeExample.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="inline-flex align-center gap-2 flex-wrap">
+    <Button gradient="blue">Blue</Button>
+    <Button gradient="cyan">Cyan</Button>
+    <Button gradient="green">Green</Button>
+    <Button gradient="lime">Lime</Button>
+    <Button gradient="pink">Pink</Button>
+    <Button gradient="purple">Purple</Button>
+    <Button gradient="red">Red</Button>
+    <Button gradient="teal">Teal</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>