From 5701af25cb085206b256ea3868f02460b569b5fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 25 Sep 2026 21:26:41 +0200
Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=94=A8=20Rename=20to=20variant,=20out?=
 =?UTF-8?q?line=20and=20type=20props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseButton.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index fb56cab..d3fdcbc 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
 // component properties
 interface Props {
-  type?: 'primary' | 'brand' | 'danger' | 'link';
+  variant?: 'primary' | 'brand' | 'danger' | 'link';
   size?: 'default' | 'small';
-  variant?: 'filled' | 'outline';
+  outline?: boolean;
   /**
    * Transform the button into an anchor tag. If null then the component will be rendered as a button tag.
    */
   href?: string;
-  formAction?: 'none' | 'submit' | 'reset';
+  type?: 'button' | 'submit' | 'reset';
   dataTestid?: string;
   disabled?: boolean;
 }
 withDefaults(defineProps<Props>(), {
-  type: 'primary',
+  variant: 'primary',
   size: 'default',
-  variant: 'filled',
-  formAction: 'none',
+  outline: false,
+  type: 'button',
   dataTestid: 'button',
   disabled: false,
 });
@@ -27,8 +27,8 @@ withDefaults(defineProps<Props>(), {
     :is="href ? 'a' : 'button'"
     :href="href"
     class="base"
-    :class="{ [type]: type, small: size === 'small', [variant]: variant }"
-    :type="formAction === 'none' ? 'button' : formAction"
+    :class="{ [variant]: variant, small: size === 'small', [outline ? 'outline' : 'filled']: true }"
+    :type="type"
     :data-testid="dataTestid"
     :disabled="disabled"
   >

From eabc2eebd083c39970a4dcf51ca5c478c30a0dd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 25 Sep 2026 21:27:21 +0200
Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=94=A8=20Update=20to=20the=20new=20pr?=
 =?UTF-8?q?op=20names=20in=20the=20BaseButton=20stories?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseButton.stories.ts | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/BaseButton.stories.ts b/src/components/BaseButton.stories.ts
index 8d113f3..4f947bb 100644
--- a/src/components/BaseButton.stories.ts
+++ b/src/components/BaseButton.stories.ts
@@ -18,8 +18,9 @@ const meta: Meta<typeof BaseButton> = {
   tags: ['autodocs'],
   argTypes: {
     size: { control: 'select', options: ['regular', 'small'] },
-    variant: { control: 'select', options: ['filled', 'outline'] },
-    type: { control: 'select', options: ['primary', 'brand', 'danger', 'link'] },
+    outline: { control: 'boolean' },
+    variant: { control: 'select', options: ['primary', 'brand', 'danger', 'link'] },
+    type: { control: 'select', options: ['button', 'submit', 'reset'] },
     disabled: { control: 'boolean' },
   },
   args: {
@@ -88,15 +89,15 @@ export const Variant: Story = {
     },
     template: `
       <div style="display:flex;gap:.5rem;align-items:center;">
-        <primary-button variant="filled">Filled</primary-button>
-        <primary-button variant="outline">Outline</primary-button>
+        <primary-button>Filled</primary-button>
+        <primary-button outline>Outline</primary-button>
       </div>
     `,
   }),
   parameters: {
     docs: {
       source: {
-        code: '<primary-button variant="filled">Filled</primary-button>\n<primary-button variant="outline">Outline</primary-button>',
+        code: '<primary-button>Filled</primary-button>\n<primary-button outline>Outline</primary-button>',
       },
     },
   },
@@ -132,15 +133,15 @@ export const Disabled: Story = {
     },
     template: `
       <div style="display:flex;gap:.5rem;align-items:center;">
-        <primary-button variant="filled" disabled>Disabled</primary-button>
-        <primary-button variant="outline" disabled>Disabled</primary-button>
+        <primary-button disabled>Disabled</primary-button>
+        <primary-button outline disabled>Disabled</primary-button>
       </div>
     `,
   }),
   parameters: {
     docs: {
       source: {
-        code: '<primary-button variant="filled" disabled>Filled</primary-button>\n<primary-button variant="outline" disabled>Outline</primary-button>',
+        code: '<primary-button disabled>Filled</primary-button>\n<primary-button outline disabled>Outline</primary-button>',
       },
     },
   },
@@ -156,15 +157,15 @@ export const FormAction: Story = {
       <div style="display:flex;flex-direction:column;gap:1rem;">
         <form style="display:flex;gap:.5rem;max-width:500px">
           <text-input name="submit" type="text" placeholder="Fill and submit me" />
-          <primary-button form-action="submit">Submit</primary-button>
+          <primary-button type="submit">Submit</primary-button>
         </form>
         <form style="display:flex;gap:.5rem;max-width:500px">
           <text-input name="submit" type="text" placeholder="Fill and reset me" />
-          <primary-button form-action="reset">Reset</primary-button>
+          <primary-button type="reset">Reset</primary-button>
         </form>
         <form style="display:flex;gap:.5rem;max-width:500px">
           <text-input name="submit" type="text" placeholder="Fill me" />
-          <primary-button form-action="none">None</primary-button>
+          <primary-button type="button">None</primary-button>
         </form>
       </div>
     `,
@@ -172,7 +173,7 @@ export const FormAction: Story = {
   parameters: {
     docs: {
       source: {
-        code: '<primary-button form-action="submit">Submit</primary-button>\n<primary-button form-action="reset">Reset</primary-button>\n<primary-button form-action="none">None</primary-button>',
+        code: '<primary-button type="submit">Submit</primary-button>\n<primary-button type="reset">Reset</primary-button>\n<primary-button type="button">None</primary-button>',
       },
     },
   },

From 2538968be8cd21a670c6af9d17411b6f6925585a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 25 Sep 2026 21:28:16 +0200
Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=94=A8=20Update=20all=20button=20vari?=
 =?UTF-8?q?ants?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BrandButton.vue        | 2 +-
 src/components/DangerButton.vue       | 2 +-
 src/components/IconButton.vue         | 2 +-
 src/components/LinkButton.vue         | 2 +-
 src/components/ModalDialog.stories.ts | 8 ++++----
 src/components/PrimaryButton.vue      | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/BrandButton.vue b/src/components/BrandButton.vue
index c94932e..42715d2 100644
--- a/src/components/BrandButton.vue
+++ b/src/components/BrandButton.vue
@@ -3,7 +3,7 @@ import BaseButton from '@/components/BaseButton.vue';
 </script>
 
 <template>
-  <base-button type="brand">
+  <base-button variant="brand">
     <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
diff --git a/src/components/DangerButton.vue b/src/components/DangerButton.vue
index f3c9458..c252726 100644
--- a/src/components/DangerButton.vue
+++ b/src/components/DangerButton.vue
@@ -3,7 +3,7 @@ import BaseButton from '@/components/BaseButton.vue';
 </script>
 
 <template>
-  <base-button type="danger">
+  <base-button variant="danger">
     <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 868d570..be78b80 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -10,7 +10,7 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <base-button type="link" class="icon-only" :class="{ [size]: size }">
+  <base-button variant="link" class="icon-only" :class="{ [size]: size }">
     <template #iconLeft="slotData">
       <slot v-bind="slotData" />
     </template>
diff --git a/src/components/LinkButton.vue b/src/components/LinkButton.vue
index eaae62c..0aca5d0 100644
--- a/src/components/LinkButton.vue
+++ b/src/components/LinkButton.vue
@@ -3,7 +3,7 @@ import BaseButton from '@/components/BaseButton.vue';
 </script>
 
 <template>
-  <base-button type="link">
+  <base-button variant="link">
     <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
diff --git a/src/components/ModalDialog.stories.ts b/src/components/ModalDialog.stories.ts
index 94c7904..0398e06 100644
--- a/src/components/ModalDialog.stories.ts
+++ b/src/components/ModalDialog.stories.ts
@@ -37,7 +37,7 @@ export const Standard: Story = {
         <span>The blessed trials awaited in the hollow temple of Silverfen. Legends in Dragon's Rest foretell a shadow child who will mend the crown. Knights of Redmarsh raised their lances to a pale sun. Each solstice, Oakshield honors the crimson sigil with fire and song. A hidden door opened within Nightveil's echoing caverns.</span>
 
         <template #actions>
-          <primary-button name="cancel" variant="outline">Secondary</primary-button>
+          <primary-button name="cancel" outline>Secondary</primary-button>
           <primary-button name="go">Primary</primary-button>
         </template>
 
@@ -61,7 +61,7 @@ export const Standard: Story = {
         <span>The blessed trials awaited in the hollow temple of Silverfen...</span>
 
         <template #actions>
-          <primary-button name="cancel" variant="outline">Secondary</primary-button>
+          <primary-button name="cancel" outline>Secondary</primary-button>
           <primary-button name="go">Primary</primary-button>
         </template>
 
@@ -146,7 +146,7 @@ export const WithActions: Story = {
           <text-input name="two" label="Another field" />
         </form>
         <template #actions>
-          <primary-button name="cancel" variant="outline">Cancel</primary-button>
+          <primary-button name="cancel" outline>Cancel</primary-button>
           <primary-button name="save">Save</primary-button>
         </template>
       </modal-dialog>
@@ -161,7 +161,7 @@ export const WithActions: Story = {
           <text-input name="two" label="Another field" />
         </form>
         <template #actions>
-          <primary-button name="cancel" variant="outline">Cancel</primary-button>
+          <primary-button name="cancel" outline>Cancel</primary-button>
           <primary-button name="save">Save</primary-button>
         </template>
       </modal-dialog>`,
diff --git a/src/components/PrimaryButton.vue b/src/components/PrimaryButton.vue
index 95a7cc0..d8e9d89 100644
--- a/src/components/PrimaryButton.vue
+++ b/src/components/PrimaryButton.vue
@@ -3,7 +3,7 @@ import BaseButton from '@/components/BaseButton.vue';
 </script>
 
 <template>
-  <base-button type="primary">
+  <base-button variant="primary">
     <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>

From d2e2b778b40fd2b4b3982241596d3d62c4cdf9d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 25 Sep 2026 21:29:29 +0200
Subject: [PATCH 4/7] =?UTF-8?q?=F0=9F=94=A8=20Fix=20base=20button=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/components/BaseButton.test.js | 86 ++++++++++++++----------------
 1 file changed, 41 insertions(+), 45 deletions(-)

diff --git a/test/components/BaseButton.test.js b/test/components/BaseButton.test.js
index b14a4c0..810fdb8 100644
--- a/test/components/BaseButton.test.js
+++ b/test/components/BaseButton.test.js
@@ -7,47 +7,47 @@ import CheckCircleFilledIcon from '@/foundation/CheckCircleFilledIcon.vue';
 describe('BaseButton', () => {
   var wrapper;
 
-  // repeat all tests for each availble BaseButton type
-  describe.each([ 'primary', 'brand', 'danger', 'link'])('Type: %s', (type) => {
+  // repeat all tests for each availble BaseButton variant
+  describe.each([ 'primary', 'brand', 'danger', 'link'])('Variant: %s', (variant) => {
 
     // build out test cases for variants/options
     const testCases = [
-      { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'none',
-        disabled: false, href: null, text: `${type} button` },
-      { type: type, size: 'default', variant: 'filled', iconLeft: true, iconRight: false, formAction: 'none',
-        disabled: false, href: null, text: `${type} button with icon left` },
-      { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: true, formAction: 'none',
-        disabled: false, href: null, text: `${type} button with icon right` },
-      { type: type, size: 'default', variant: 'filled', iconLeft: true, iconRight: true, formAction: 'none',
-        disabled: false, href: null, text: `${type} button with icon left and right` },
-      { type: type, size: 'small', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'none',
-        disabled: false, href: null, text: `small ${type} button` },
-      { type: type, size: 'default', variant: 'outline', iconLeft: false, iconRight: false, formAction: 'none',
-        disabled: false, href: null, text: `${type} outlined` },
-      { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'none',
-        disabled: false, href: 'http://tb.pro', text: `${type} HREF` },
-      { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'submit',
-        disabled: false, href: null, text: `${type} submit` },
-      { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'reset',
-        disabled: false, href: null, text: `${type} reset` },
-      { type: type, size: 'default', variant: 'filled', iconLeft: false, iconRight: false, formAction: 'none',
-        disabled: true, href: null, text: `${type} disabled` },
+      { variant: variant, size: 'default', outline: false, iconLeft: false, iconRight: false, type: 'button',
+        disabled: false, href: null, text: `${variant} button` },
+      { variant: variant, size: 'default', outline: false, iconLeft: true, iconRight: false, type: 'button',
+        disabled: false, href: null, text: `${variant} button with icon left` },
+      { variant: variant, size: 'default', outline: false, iconLeft: false, iconRight: true, type: 'button',
+        disabled: false, href: null, text: `${variant} button with icon right` },
+      { variant: variant, size: 'default', outline: false, iconLeft: true, iconRight: true, type: 'button',
+        disabled: false, href: null, text: `${variant} button with icon left and right` },
+      { variant: variant, size: 'small', outline: false, iconLeft: false, iconRight: false, type: 'button',
+        disabled: false, href: null, text: `small ${variant} button` },
+      { variant: variant, size: 'default', outline: true, iconLeft: false, iconRight: false, type: 'button',
+        disabled: false, href: null, text: `${variant} outlined` },
+      { variant: variant, size: 'default', outline: false, iconLeft: false, iconRight: false, type: 'button',
+        disabled: false, href: 'http://tb.pro', text: `${variant} HREF` },
+      { variant: variant, size: 'default', outline: false, iconLeft: false, iconRight: false, type: 'submit',
+        disabled: false, href: null, text: `${variant} submit` },
+      { variant: variant, size: 'default', outline: false, iconLeft: false, iconRight: false, type: 'reset',
+        disabled: false, href: null, text: `${variant} reset` },
+      { variant: variant, size: 'default', outline: false, iconLeft: false, iconRight: false, type: 'button',
+        disabled: true, href: null, text: `${variant} disabled` },
     ];
 
     afterEach(() => {
       wrapper.unmount();
     });
 
-    it.each(testCases)('$type button renders correctly with the given options',
-      async ({ type, size, variant, iconLeft, iconRight, formAction, disabled, href, text }) => {
+    it.each(testCases)('$variant button renders correctly with the given options',
+      async ({ variant, size, outline, iconLeft, iconRight, type, disabled, href, text }) => {
       const ourProps = {
-        type: type,
-        size: size,
         variant: variant,
-        formAction: formAction,
+        size: size,
+        outline: outline,
+        type: type,
         disabled: disabled,
-        href: type == 'link'? 'http://tb.pro' : href, // we want our link type buttons to always have an href
-        dataTestid: `${type}-data-test-id`,
+        href: variant == 'link'? 'http://tb.pro' : href, // we want our link variant buttons to always have an href
+        dataTestid: `${variant}-data-test-id`,
       };
       const ourSlots = {
           default: text,
@@ -72,8 +72,8 @@ describe('BaseButton', () => {
 
       const btn = wrapper.find(btnSelector);
       expect(btn.isVisible()).toBe(true);
-      expect(btn.attributes().class).toContain(ourProps['type']);
       expect(btn.attributes().class).toContain(ourProps['variant']);
+      expect(btn.attributes().class).toContain(ourProps['outline'] ? 'outline' : 'filled');
       expect(btn.text()).toBe(text);
 
       // icon displayed or not depending on option
@@ -83,12 +83,8 @@ describe('BaseButton', () => {
         expect(wrapper.find('.icon').exists()).toBe(false);
       }
 
-      // button is of type 'button' unless formAction provided
-      if (ourProps['formAction'] == 'none') {
-        expect(btn.attributes().type).toBe('button');
-      } else {
-        expect(btn.attributes().type).toBe(ourProps['formAction']);
-      }
+      // native button type attribute always matches the type prop
+      expect(btn.attributes().type).toBe(ourProps['type']);
 
       // providing href turns button into an anchor tag
       if (href) {
@@ -96,16 +92,16 @@ describe('BaseButton', () => {
       }
     });
 
-    it.each(testCases)('able to click $type button with the given options',
-      async ({ type, size, variant, formAction, disabled, href, text }) => {
+    it.each(testCases)('able to click $variant button with the given options',
+      async ({ variant, size, outline, type, disabled, href, text }) => {
       const ourProps = {
-        type: type,
-        size: size,
         variant: variant,
-        formAction: formAction,
+        size: size,
+        outline: outline,
+        type: type,
         disabled: disabled,
-        href: type == 'link'? 'http://tb.pro' : href, // we want our link type buttons to always have an href
-        dataTestid: `${type}-data-test-id`,
+        href: variant == 'link'? 'http://tb.pro' : href, // we want our link variant buttons to always have an href
+        dataTestid: `${variant}-data-test-id`,
       };
       const ourSlots = {
           default: text,
@@ -130,10 +126,10 @@ describe('BaseButton', () => {
         }
       } else {
         expect(btn.attributes().disabled).not.toBeNull();
-        if (type !== 'link') {
+        if (variant !== 'link') {
           expect(wrapper.emitted().click, 'expected click event not to have been emitted because button is disabled').toBeFalsy();
         } else {
-          // link type buttons can still be clicked (to navigate the to the link) even if disabled
+          // link variant buttons can still be clicked (to navigate the to the link) even if disabled
           expect(wrapper.emitted().click, 'expected click event to have been emitted').toBeTruthy();
           expect(wrapper.emitted()['click'].length).toBe(1);
         }

From 58aa6c67b5a27f28ca4c129fdc7a399fe3eae755 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 25 Sep 2026 21:30:06 +0200
Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=93=9C=20Update=20documentation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c07f5e5..591a1f7 100644
--- a/README.md
+++ b/README.md
@@ -89,7 +89,7 @@ Running `pnpm run build:ce` ("ce" for "Custom Elements") produces two files that
 Example usage:
 
 ```html
-<bolt-primary-button variant="outline" href="{{ url('roadmaps.desktop') }}">
+<bolt-primary-button outline href="{{ url('roadmaps.desktop') }}">
   Visit Desktop Roadmap
 </bolt-primary-button>
 ```
@@ -124,7 +124,7 @@ export { BoltPrimaryButton };
 When you use one of the Web Components in your markup, you will likely want to specify the text content:
 
 ```html
-<bolt-primary-button variant="outline" href="{{ url('roadmaps.desktop') }}">
+<bolt-primary-button outline href="{{ url('roadmaps.desktop') }}">
   Visit Desktop Roadmap
 </bolt-primary-button>
 ```
@@ -135,7 +135,7 @@ If the component you want to use does not have a default slot, add it:
 
 ```diff
  <template>
-   <base-button type="primary">
+   <base-button variant="primary">
      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>

From 8aa29c70fd76033a14c3ee09e4a89534bb9d3537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 25 Sep 2026 21:33:32 +0200
Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=94=A8=20Rename=20stories?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseButton.stories.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/BaseButton.stories.ts b/src/components/BaseButton.stories.ts
index 4f947bb..f575199 100644
--- a/src/components/BaseButton.stories.ts
+++ b/src/components/BaseButton.stories.ts
@@ -57,7 +57,7 @@ export const Standard: Story = {
   },
 };
 
-export const Type: Story = {
+export const Variant: Story = {
   render: (args) => ({
     components: { PrimaryButton, BrandButton, DangerButton, LinkButton },
     setup() {
@@ -81,7 +81,7 @@ export const Type: Story = {
   },
 };
 
-export const Variant: Story = {
+export const Outline: Story = {
   render: (args) => ({
     components: { PrimaryButton },
     setup() {
@@ -147,7 +147,7 @@ export const Disabled: Story = {
   },
 };
 
-export const FormAction: Story = {
+export const Type: Story = {
   render: (args) => ({
     components: { PrimaryButton, TextInput },
     setup() {

From 5ae4f56273fce893849d887cac00fffc6df78e00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Mon, 5 Oct 2026 17:39:07 +0200
Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=94=A8=20Improve=20class=20binding=20?=
 =?UTF-8?q?and=20type=20setting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseButton.vue      | 4 ++--
 test/components/BaseButton.test.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index d3fdcbc..e93884d 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -27,8 +27,8 @@ withDefaults(defineProps<Props>(), {
     :is="href ? 'a' : 'button'"
     :href="href"
     class="base"
-    :class="{ [variant]: variant, small: size === 'small', [outline ? 'outline' : 'filled']: true }"
-    :type="type"
+    :class="[variant, { small: size === 'small', outline, filled: !outline }]"
+    :type="!href ? type : undefined"
     :data-testid="dataTestid"
     :disabled="disabled"
   >
diff --git a/test/components/BaseButton.test.js b/test/components/BaseButton.test.js
index 810fdb8..e50aaa9 100644
--- a/test/components/BaseButton.test.js
+++ b/test/components/BaseButton.test.js
@@ -83,8 +83,8 @@ describe('BaseButton', () => {
         expect(wrapper.find('.icon').exists()).toBe(false);
       }
 
-      // native button type attribute always matches the type prop
-      expect(btn.attributes().type).toBe(ourProps['type']);
+      // native button type attribute matches the type prop, but is not set on anchor tags
+      expect(btn.attributes().type).toBe(ourProps['href'] ? undefined : ourProps['type']);
 
       // providing href turns button into an anchor tag
       if (href) {