1 files changed, 26 insertions, 15 deletions
diff --git a/src/ui/c-button/c-button.demo.vue b/src/ui/c-button/c-button.demo.vue
index 988659f..4e9aa1a 100644
--- a/src/ui/c-button/c-button.demo.vue
+++ b/src/ui/c-button/c-button.demo.vue
@@ -2,28 +2,39 @@
   <div v-for="buttonVariant of buttonVariants" :key="buttonVariant">
     <h2>{{ _.capitalize(buttonVariant) }}</h2>
 
-    <c-button v-for="buttonType of buttonTypes" :key="buttonType" :variant="buttonVariant" :type="buttonType" mx-1>
-      Button
-    </c-button>
+    <div v-for="buttonSize of buttonSizes" :key="buttonSize" mb-2>
+      <c-button
+        v-for="buttonType of buttonTypes"
+        :key="buttonType"
+        :variant="buttonVariant"
+        :type="buttonType"
+        :size="buttonSize"
+        mx-1
+      >
+        Button
+      </c-button>
 
-    <c-button
-      v-for="buttonType of buttonTypes"
-      :key="buttonType"
-      :variant="buttonVariant"
-      :type="buttonType"
-      circle
-      mx-1
-    >
-      A
-    </c-button>
+      <c-button
+        v-for="buttonType of buttonTypes"
+        :key="buttonType"
+        :variant="buttonVariant"
+        :type="buttonType"
+        :size="buttonSize"
+        circle
+        mx-1
+      >
+        A
+      </c-button>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import _ from 'lodash';
 
-const buttonVariants = ['basic', 'text'];
-const buttonTypes = ['default', 'primary'];
+const buttonVariants = ['basic', 'text'] as const;
+const buttonTypes = ['default', 'primary'] as const;
+const buttonSizes = ['small', 'medium', 'large'] as const;
 </script>
 
 <style lang="less" scoped></style>