adds fullwidth prop

src/App.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="button-group">
-
     <MyButton variant="primary"
               size="sm">
       Primary Small
     </MyButton>
-    <MyButton variant="secondary"
+    <MyButton>
-              size="md">
+      Primary Medium
+    </MyButton>
+    <MyButton variant="secondary">
       Secondary Medium
     </MyButton>
     <MyButton variant="danger"
@@ -26,16 +27,25 @@
       Danger Large
     </MyButton>
   </div>
+  <div class="button-group">
+    <MyButton variant="danger"
+              size="lg"
+              :fullwidth="true">
+      Danger Fullwidth
+    </MyButton>
+  </div>
 </template>
 
 <script setup lang="ts">
 import MyButton from './components/MyButton.vue';
 
 </script>
+
 <style scoped>
 .button-group {
   display: flex;
   align-items: center;
   gap: 1rem;
+  margin-block-start: 1rem;
 }
 </style>

src/components/MyButton.vue

@@ -22,15 +22,17 @@ import { computed } from 'vue';
 
 interface ButtonProps {
   disabled?: boolean
+  fullwidth?: boolean
   icon?: string
   loading?: boolean
-  size: 'sm' | 'md' | 'lg'
+  size?: 'sm' | 'md' | 'lg'
-  variant: 'primary' | 'secondary' | 'danger'
+  variant?: 'primary' | 'secondary' | 'danger'
 }
 
 const {
   variant = "primary",
   size = "md",
+  fullwidth = false,
   disabled = false,
   loading = false
 } = defineProps<ButtonProps>()
@@ -39,7 +41,8 @@ const emit = defineEmits(['click'])
 
 const classes = computed(() => [
   `btn--${variant}`,
-  `btn--${size}`
+  `btn--${size}`,
+  fullwidth && 'btn--fullwidth'
 ])
 </script>
 
@@ -89,6 +92,10 @@ const classes = computed(() => [
     --border-radius: 0.5rem;
   }
 
+  &.btn--fullwidth {
+    width: 100%;
+  }
+
   &[aria-busy="true"] {
     opacity: 0.5;
   }