ui-lib(button): size variants

1 files changed, 10 insertions, 5 deletions

diff --git a/src/ui/c-button/c-button.vue b/src/ui/c-button/c-button.vue
index 2cbc4fd..c17b078 100644
--- a/src/ui/c-button/c-button.vue
+++ b/src/ui/c-button/c-button.vue
@@ -25,6 +25,7 @@ const props = withDefaults(
     circle?: boolean;
     href?: string;
     to?: RouteLocationRaw;
+    size?: 'small' | 'medium' | 'large';
   }>(),
   {
     type: 'default',
@@ -34,9 +35,10 @@ const props = withDefaults(
     circle: false,
     href: undefined,
     to: undefined,
+    size: 'medium',
   },
 );
-const { variant, disabled, round, circle, href, type, to } = toRefs(props);
+const { variant, disabled, round, circle, href, type, to, size: sizeName } = toRefs(props);
 
 const emits = defineEmits(['click']);
 
@@ -58,18 +60,20 @@ const tag = computed(() => {
   return 'button';
 });
 const appTheme = useAppTheme();
+
+const size = computed(() => theme.value.size[sizeName.value]);
 </script>
 
 <style lang="less" scoped>
 .c-button {
   line-height: 1;
   font-family: inherit;
-  font-size: inherit;
+  font-size: v-bind('size.fontSize');
   border: none;
   text-align: center;
   cursor: pointer;
   text-decoration: none;
-  height: 34px;
+  height: v-bind('size.width');
   font-weight: 400;
   color: v-bind('variantTheme.textColor');
   padding: 0 14px;
@@ -89,8 +93,9 @@ const appTheme = useAppTheme();
   }
 
   &.circle {
-    border-radius: 40px;
-    width: 34px;
+    border-radius: v-bind('size.width');
+    width: v-bind('size.width');
+    padding: 0;
   }
 
   &:not(.disabled) {