docs: update ready components pages

2022-07-25 14:22:53 +03:00
parent f70aff0165
commit 6117a0ffaf
82 changed files with 100 additions and 35 deletions
--- a/docs/components/button/button.md
+++ b/docs/components/button/button.md
@@ -0,0 +1,438 @@
+<script setup>
+import ButtonColorExample from './examples/ButtonColorExample.vue';
+import ButtonSizeExample from './examples/ButtonSizeExample.vue';
+import ButtonPillExample from './examples/ButtonPillExample.vue';
+import ButtonGradientMonochromeExample from './examples/ButtonGradientMonochromeExample.vue';
+import ButtonGradientDuotoneExample from './examples/ButtonGradientDuotoneExample.vue';
+import ButtonOutlineColorExample from './examples/ButtonOutlineColorExample.vue';
+import ButtonPrefixExample from './examples/ButtonPrefixExample.vue';
+import ButtonSuffixExample from './examples/ButtonSuffixExample.vue';
+import ButtonOutlineGradientExample from './examples/ButtonOutlineGradientExample.vue';
+import ButtonGradientShadowExample from './examples/ButtonGradientShadowExample.vue';
+import ButtonIconExample from './examples/ButtonIconExample.vue';
+import ButtonSquareExample from './examples/ButtonSquareExample.vue';
+import ButtonDisabledExample from './examples/ButtonDisabledExample.vue';
+import ButtonLoadingExample from './examples/ButtonLoadingExample.vue';
+</script>
+
+# Button
+
+#### Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
+:::
+
+The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.
+
+Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.
+
+## Prop - color
+
+```typescript
+type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
+defineProps({
+    color: {
+        type: String as PropType<ButtonVariant>,
+        default: 'default',
+    }, 
+})
+```
+
+
+<ButtonColorExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+    <Button color="default">Default</Button>
+    <Button color="alternative">Alternative</Button>
+    <Button color="dark">Dark</Button>
+    <Button color="light">Light</Button>
+    <Button color="green">Green</Button>
+    <Button color="red">Red</Button>
+    <Button color="yellow">Yellow</Button>
+    <Button color="purple">Purple</Button>
+</template>
+```
+
+
+## Prop - size
+
+```typescript
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+defineProps({
+    size: {
+        type: String as PropType<ButtonSize>,
+        default: 'md',
+    },
+})
+```
+
+
+<ButtonSizeExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button size="xs">XS</Button>
+  <Button size="sm">SM</Button>
+  <Button size="md">MD</Button>
+  <Button size="lg">LG</Button>
+  <Button size="xl">XL</Button>
+</template>
+```
+
+## Prop - pill
+
+```typescript
+defineProps({
+    pill: {
+        type: Boolean,
+        default: false,
+    },
+})
+```
+
+
+<ButtonPillExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button color="default" pill>Default</Button>
+  <Button color="alternative" pill>Alternative</Button>
+  <Button color="dark" pill>Dark</Button>
+  <Button color="light" pill>Light</Button>
+  <Button color="green" pill>Green</Button>
+  <Button color="red" pill>Red</Button>
+  <Button color="yellow" pill>Yellow</Button>
+  <Button color="purple" pill>Purple</Button>
+</template>
+```
+
+## Prop - gradient (monochrome)
+
+```typescript
+type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
+type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
+type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
+
+defineProps({
+    gradient: {
+        type: [String, null] as PropType<ButtonGradient | null>,
+        default: null,
+    },
+})
+```
+
+
+<ButtonGradientMonochromeExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <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>
+</template>
+```
+
+
+## Prop - gradient  (duotone)
+
+<ButtonGradientDuotoneExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="purple-blue">Purple to blue</Button>
+  <Button gradient="cyan-blue">Cyan to blue</Button>
+  <Button gradient="green-blue">Green to blue</Button>
+  <Button gradient="purple-pink">Purple to pink</Button>
+  <Button gradient="pink-orange">Pink to orange</Button>
+  <Button gradient="teal-lime">Teal to lime</Button>
+  <Button gradient="red-yellow">Red to yellow</Button>
+</template>
+```
+
+## Prop - outline (color)
+
+```typescript
+defineProps({
+    outline: {
+        type: Boolean,
+        default: false,
+    },
+})
+```
+
+
+<ButtonOutlineColorExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="purple-blue">Purple to blue</Button>
+  <Button gradient="cyan-blue">Cyan to blue</Button>
+  <Button gradient="green-blue">Green to blue</Button>
+  <Button gradient="purple-pink">Purple to pink</Button>
+  <Button gradient="pink-orange">Pink to orange</Button>
+  <Button gradient="teal-lime">Teal to lime</Button>
+  <Button gradient="red-yellow">Red to yellow</Button>
+</template>
+```
+
+
+## Prop - outline (gradient)
+
+<ButtonOutlineGradientExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="purple-blue" outline>Purple to blue</Button>
+  <Button gradient="cyan-blue" outline>Cyan to blue</Button>
+  <Button gradient="green-blue" outline>Green to blue</Button>
+  <Button gradient="purple-pink" outline>Purple to pink</Button>
+  <Button gradient="pink-orange" outline>Pink to orange</Button>
+  <Button gradient="teal-lime" outline>Teal to lime</Button>
+  <Button gradient="red-yellow" outline>Red to yellow</Button>
+</template>
+```
+
+## Prop - shadow
+
+```typescript
+type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
+
+defineProps({
+    shadow: {
+        type: [String, null] as PropType<ButtonMonochromeGradient | '' | null>,
+        default: null,
+    },
+})
+```
+
+<ButtonGradientShadowExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="blue" shadow>Blue</Button>
+  <Button gradient="cyan" shadow>Cyan</Button>
+  <Button gradient="green" shadow>Green</Button>
+  <Button gradient="lime" shadow>Lime</Button>
+  <Button gradient="pink" shadow>Pink</Button>
+  <Button gradient="purple" shadow>Purple</Button>
+  <Button gradient="red" shadow>Red</Button>
+  <Button gradient="teal" shadow>Teal</Button>
+</template>
+```
+
+
+## Prop - square
+
+```typescript
+defineProps({
+    square: {
+        type: Boolean,
+        default: false,
+    },
+})
+```
+
+
+<ButtonSquareExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="red-yellow" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+  </Button>
+  <Button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+  </Button>
+  <Button color="dark" outline square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+  </Button>
+  <Button color="yellow" pill outline square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+  </Button>
+</template>
+```
+
+
+## Prop - loading
+
+```typescript
+defineProps({
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    loadingPosition: {
+        type: String as PropType<'suffix' | 'prefix'>,
+        default: 'prefix',
+    },
+})
+```
+
+
+<ButtonLoadingExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+const loading = ref(false)
+</script>
+<template>
+  <Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
+    Click me
+  </Button>
+  <Button gradient="red-yellow" :loading="loading" @click="loading = !loading" size="sm">
+    Click me
+  </Button>
+  <Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
+    Click me
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd"
+              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+              clip-rule="evenodd"></path>
+      </svg>
+    </template>
+  </Button>
+  <Button gradient="green-blue" :loading="loading" @click="loading = !loading" size="lg">
+    Click me
+  </Button>
+  <Button gradient="pink" :loading="loading" @click="loading = !loading" size="xl">
+    Click me
+  </Button>
+</template>
+```
+
+
+## Prop - disabled
+
+```typescript
+defineProps({
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+})
+```
+
+
+<ButtonDisabledExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="red-yellow" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+  </Button>
+  <Button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+  </Button>
+  <Button color="dark" outline square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+  </Button>
+  <Button color="yellow" pill outline square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+  </Button>
+</template>
+```
+
+
+## Slot - default
+
+<ButtonIconExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button gradient="purple-blue" square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+  </Button>
+  <Button color="default" pill square>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+  </Button>
+  <Button gradient="green-blue" square>
+    Close something
+  </Button>
+  <Button color="default" pill outline square>
+    Open something
+    <template #suffix>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </template>
+  </Button>
+</template>
+```
+
+## Slot - prefix
+
+<ButtonPrefixExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button color="default">
+    <template #prefix>
+      <svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
+    </template>
+    Buy
+  </Button>
+</template>
+```
+
+## Slot - suffix
+
+<ButtonSuffixExample />
+
+```vue
+<script setup>
+import { Button } from 'flowbite-vue'
+</script>
+<template>
+  <Button color="default">
+    Choose plan
+    <template #suffix>
+      <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </template>
+  </Button>
+</template>
+```
--- a/docs/components/button/examples/ButtonColorExample.vue
+++ b/docs/components/button/examples/ButtonColorExample.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Button color="default">Default</Button>
+    <Button color="alternative">Alternative</Button>
+    <Button color="dark">Dark</Button>
+    <Button color="light">Light</Button>
+    <Button color="green">Green</Button>
+    <Button color="red">Red</Button>
+    <Button color="yellow">Yellow</Button>
+    <Button color="purple">Purple</Button>
+    <Button color="pink">Pink</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
--- a/docs/components/button/examples/ButtonDisabledExample.vue
+++ b/docs/components/button/examples/ButtonDisabledExample.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Button color="default" disabled>Default</Button>
+    <Button color="default" outline disabled>Default outline</Button>
+    <Button gradient="red" disabled>Red gradient</Button>
+    <Button gradient="red-yellow" disabled>Red to yellow gradient</Button>
+    <Button gradient="red-yellow" outline disabled>Red to yellow outline</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
--- a/docs/components/button/examples/ButtonGradientDuotoneExample.vue
+++ b/docs/components/button/examples/ButtonGradientDuotoneExample.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Button gradient="purple-blue">Purple to blue</Button>
+    <Button gradient="cyan-blue">Cyan to blue</Button>
+    <Button gradient="green-blue">Green to blue</Button>
+    <Button gradient="purple-pink">Purple to pink</Button>
+    <Button gradient="pink-orange">Pink to orange</Button>
+    <Button gradient="teal-lime">Teal to lime</Button>
+    <Button gradient="red-yellow">Red to yellow</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
--- a/docs/components/button/examples/ButtonGradientMonochromeExample.vue
+++ b/docs/components/button/examples/ButtonGradientMonochromeExample.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw 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>
--- a/docs/components/button/examples/ButtonGradientShadowExample.vue
+++ b/docs/components/button/examples/ButtonGradientShadowExample.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Button gradient="blue" shadow>Blue with blue</Button>
+    <Button gradient="cyan" shadow>Cyan with cyan</Button>
+    <Button gradient="green" shadow>Green with green</Button>
+    <Button gradient="lime" shadow>Lime with lime</Button>
+    <Button gradient="pink" shadow>Pink with pink</Button>
+    <Button gradient="purple" shadow>Purple with purple</Button>
+    <Button gradient="red" shadow>Red with red</Button>
+    <Button gradient="teal" shadow>Teal with teal</Button>
+    <Button gradient="blue" shadow="red">Blue with red</Button>
+    <Button gradient="cyan" shadow="teal">Cyan with teal</Button>
+    <Button gradient="teal" shadow="purple">Teal with purple</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
--- a/docs/components/button/examples/ButtonIconExample.vue
+++ b/docs/components/button/examples/ButtonIconExample.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Button gradient="purple-blue" square>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </Button>
+    <Button color="default" pill square>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </Button>
+    <Button gradient="green-blue" square>
+      Close something
+    </Button>
+    <Button color="default" pill outline square>
+      Open something
+      <template #suffix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </template>
+    </Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
--- a/docs/components/button/examples/ButtonLoadingExample.vue
+++ b/docs/components/button/examples/ButtonLoadingExample.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="vp-raw inline-flex items-center gap-2 flex-wrap">
+    <Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
+      Click me
+    </Button>
+    <Button gradient="red-yellow" :loading="loading" @click="loading = !loading" size="sm">
+      Click me
+    </Button>
+    <Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
+      Click me
+      <template #suffix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd"
+                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                clip-rule="evenodd"></path>
+        </svg>
+      </template>
+    </Button>
+    <Button gradient="green-blue" :loading="loading" @click="loading = !loading" size="lg">
+      Click me
+    </Button>
+    <Button gradient="pink" :loading="loading" @click="loading = !loading" size="xl">
+      Click me
+    </Button>
+  </div>
+</template>
+<script lang="ts" setup>
+import {ref} from 'vue'
+import {Button} from '../../../../src/index'
+
+const loading = ref(false)
+</script>
--- a/docs/components/button/examples/ButtonOutlineColorExample.vue
+++ b/docs/components/button/examples/ButtonOutlineColorExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Button color="default" outline>Default</Button>
+    <Button color="dark" outline>Dark</Button>
+    <Button color="green" outline>Green</Button>
+    <Button color="red" outline>Red</Button>
+    <Button color="yellow" outline>Yellow</Button>
+    <Button color="purple" outline>Purple</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
--- a/docs/components/button/examples/ButtonOutlineGradientExample.vue
+++ b/docs/components/button/examples/ButtonOutlineGradientExample.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Button gradient="purple-blue" outline>Purple to blue</Button>
+    <Button gradient="cyan-blue" outline>Cyan to blue</Button>
+    <Button gradient="green-blue" outline>Green to blue</Button>
+    <Button gradient="purple-pink" outline>Purple to pink</Button>
+    <Button gradient="pink-orange" outline>Pink to orange</Button>
+    <Button gradient="teal-lime" outline>Teal to lime</Button>
+    <Button gradient="red-yellow" outline>Red to yellow</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
--- a/docs/components/button/examples/ButtonPillExample.vue
+++ b/docs/components/button/examples/ButtonPillExample.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Button color="default" pill>Default</Button>
+    <Button color="alternative" pill>Alternative</Button>
+    <Button color="dark" pill>Dark</Button>
+    <Button color="light" pill>Light</Button>
+    <Button color="green" pill>Green</Button>
+    <Button color="red" pill>Red</Button>
+    <Button color="yellow" pill>Yellow</Button>
+    <Button color="purple" pill>Purple</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
--- a/docs/components/button/examples/ButtonPrefixExample.vue
+++ b/docs/components/button/examples/ButtonPrefixExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Button color="default">
+      <template #prefix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
+      </template>
+      Buy
+    </Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
--- a/docs/components/button/examples/ButtonSizeExample.vue
+++ b/docs/components/button/examples/ButtonSizeExample.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="vp-raw inline-flex items-center gap-2 flex-wrap">
+    <Button size="xs">Extra small - xs</Button>
+    <Button size="sm">Small - sm</Button>
+    <Button size="md">Medium - md</Button>
+    <Button size="lg">Large - lg</Button>
+    <Button size="xl">Extra Large - xl</Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
--- a/docs/components/button/examples/ButtonSquareExample.vue
+++ b/docs/components/button/examples/ButtonSquareExample.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Button gradient="red-yellow" square>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </Button>
+    <Button color="default" pill square>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </Button>
+    <Button color="dark" outline square>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </Button>
+    <Button color="yellow" pill outline square>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>
--- a/docs/components/button/examples/ButtonSuffixExample.vue
+++ b/docs/components/button/examples/ButtonSuffixExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
+    <Button color="default">
+      Choose plan
+      <template #suffix>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </template>
+    </Button>
+  </div>
+</template>
+<script setup>
+import { Button } from '../../../../src/index'
+</script>