fix(Button): add type prop and default to button to avoid native form submission

Author: tewshi

src/components/buttons/button/Button.spec.ts

@@ -14,6 +14,7 @@ describe('Button/Button', () => {
     });
     expect(wrapper.text()).toContain(label);
     expect(wrapper.classes()).toMatch(/_btn_/);
+    expect(wrapper.attributes('type')).toBe('button');
   });
 
   it('passes disabled props', async () => {

src/components/buttons/button/Button.stories.ts

@@ -37,6 +37,7 @@ const meta: Meta<PropsAndLabel> = {
     elevation: { control: 'number', table: { category: 'Shape' } },
     icon: { control: 'boolean', table: { category: 'Shape' } },
     size: { control: 'select', options: ['medium', 'sm', 'lg'] },
+    type: { control: 'select', options: ['button', 'submit'] },
     disabled: { control: 'boolean', table: { category: 'State' } },
     loading: { control: 'boolean', table: { category: 'State' } },
   },

src/components/buttons/button/Button.vue

@@ -15,6 +15,7 @@ export interface ButtonProps {
   active?: boolean;
   size?: 'sm' | 'lg';
   tag?: 'button' | 'a';
+  type?: 'button' | 'submit';
   value?: ModelType;
 }
 
@@ -33,6 +34,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   active: false,
   size: undefined,
   tag: 'button',
+  type: 'button',
   value: undefined,
 });
 
@@ -98,6 +100,7 @@ const slots = useSlots();
       },
     ]"
     :disabled="disabled || loading"
+    :type="tag === 'button' ? type : undefined"
     v-bind="attrs"
     v-on="
       // eslint-disable-next-line vue/no-deprecated-dollar-listeners-api