diff --git a/src/stories/components/Button/Button.stories.ts b/src/stories/components/Button/Button.stories.ts
index eaefe1f2601624a2703192b16033eda1d169017c..666b620dcdb9e725d0d20973ae0673c5d5bc011b 100644
--- a/src/stories/components/Button/Button.stories.ts
+++ b/src/stories/components/Button/Button.stories.ts
@@ -15,6 +15,7 @@ const meta: Meta = {
   },
   argTypes: {
     label: { control: 'text' },
+    padding: { control: 'text' },
     size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
     textStyle: { control: 'select', options: ['bold', 'italic'] },
     iconPos: { control: 'select', options: ['left', 'top', 'right', 'bottom'] },
diff --git a/src/stories/components/Button/Button.vue b/src/stories/components/Button/Button.vue
index 81fe6a3a7675b5dcbdac03119ae5c61399d66657..41d7e61d4173e12966b742524dc8e2d96361aa38 100644
--- a/src/stories/components/Button/Button.vue
+++ b/src/stories/components/Button/Button.vue
@@ -18,7 +18,7 @@ const color = computed(() =>
     : convertThemeToTextColor(props.theme, props.darknessTheme),
 );
 const borderColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
-const width = computed(() => (props.width ? `${props.width}px` : 'max-content'));
+const width = computed(() => (props.width ? props.width : 'max-content'));
 const textSize = computed(() => {
   switch (props.size) {
     case 'small':
@@ -31,15 +31,16 @@ const textSize = computed(() => {
   return '16px';
 });
 const buttonPadding = computed(() => {
+  if (props.padding) return props.padding;
   switch (props.size) {
     case 'small':
-      return '0.5rem 0.375rem';
+      return '0.5rem';
     case 'large':
-      return '1.2rem 0.8rem';
+      return '1.2rem';
     case 'huge':
-      return '1.8rem 1.2rem';
+      return '1.8rem';
   }
-  return '0.75rem 0.5rem';
+  return '0.75rem';
 });
 </script>