docs(icon-button): add more examples for icon buttons

Author: lepture

docs/content/components/icon-button.md

@@ -14,6 +14,18 @@ radix: https://www.radix-ui.com/themes/docs/components/icon-button
 
 ## Examples
 
+### Size
+
+<Example name="icon-button/Size.vue" />
+
 ### Variant
 
 <Example name="icon-button/Variant.vue" />
+
+### Color
+
+<Example name="icon-button/Color.vue" />
+
+### Radius
+
+<Example name="icon-button/Radius.vue" />

docs/examples/icon-button/Color.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { IconButton } from '#components'
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <IconButton color="indigo" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+    <IconButton color="cyan" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+    <IconButton color="orange" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+    <IconButton color="crimson" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+  </div>
+</template>

docs/examples/icon-button/Radius.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { IconButton } from '#components'
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <IconButton radius="none" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+    <IconButton radius="small" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+    <IconButton radius="medium" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+    <IconButton radius="large" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+    <IconButton radius="full" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+  </div>
+</template>

docs/examples/icon-button/Size.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { IconButton } from '#components'
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <IconButton size="1" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+    <IconButton size="2" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+    <IconButton size="3" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+    <IconButton size="4" variant="soft">
+      <Icon icon="lucide:bookmark" />
+    </IconButton>
+  </div>
+</template>

eslint.config.js

@@ -8,6 +8,7 @@ export default defineConfigWithVueTs(
     name: 'app/files-to-ignore',
     ignores: [
       '**/dist/**',
+      'site/public/**',
       '.vitepress/cache/**'
     ],
   },