From dc8b92484bfead544916ca34079cfdc10107e698 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Dziewo=C5=84ski?= <szymon.dziewonski@gmail.com>
Date: Mon, 2 Oct 2023 10:09:25 +0200
Subject: [PATCH] chore: remove redundant type="button" from SfButton (#2990)

---
 apps/docs/components/hooks/usePagination.md          |  6 +-----
 apps/preview/next/pages/examples/SfDrawer.tsx        |  4 +---
 apps/preview/next/pages/examples/SfModal.tsx         |  5 +----
 .../next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx |  1 -
 .../showcases/Breadcrumbs/BreadcrumbsSeparator.tsx   |  1 -
 .../showcases/Breadcrumbs/BreadcrumbsWithIcon.tsx    |  1 -
 .../next/pages/showcases/Button/ButtonBlock.tsx      |  6 +-----
 .../next/pages/showcases/Button/ButtonContent.tsx    |  2 +-
 .../next/pages/showcases/Button/ButtonSizes.tsx      | 12 +++---------
 .../next/pages/showcases/Button/ButtonVariants.tsx   | 12 +++---------
 .../next/pages/showcases/Drawer/Placement.tsx        |  4 +---
 .../showcases/Drawer/TransitionAndCloseButton.tsx    |  4 +---
 .../showcases/FormFields/FormFieldsRequired.tsx      |  2 +-
 .../next/pages/showcases/MegaMenu/BaseMegaMenu.tsx   |  2 --
 .../next/pages/showcases/Modal/ModalBasic.tsx        | 10 +++-------
 .../next/pages/showcases/Modal/ModalTransition.tsx   | 10 +++-------
 .../next/pages/showcases/NavbarTop/NavbarTop.tsx     |  1 -
 .../NavbarTop/NavbarTopFilledSimpleMobile.tsx        |  1 -
 .../next/pages/showcases/Pagination/Pagination.tsx   |  2 --
 .../next/pages/showcases/ProductCard/Details.tsx     |  8 +++-----
 .../showcases/ProductCard/ProductCardHorizontal.tsx  |  2 --
 .../showcases/ProductCard/ProductCardVertical.tsx    |  3 +--
 .../next/pages/showcases/ProductSlider/Basic.tsx     |  1 -
 .../pages/showcases/QuantitySelector/OutOfStock.tsx  |  3 +--
 .../showcases/QuantitySelector/QuantitySelector.tsx  |  2 --
 .../pages/showcases/QuantitySelector/Rounded.tsx     |  2 --
 .../pages/showcases/RatingForms/ProductRating.tsx    |  2 +-
 .../RatingForms/ProductRatingWithReview.tsx          |  2 +-
 apps/preview/nuxt/pages/examples/SfDrawer.vue        |  2 +-
 apps/preview/nuxt/pages/examples/SfModal.vue         |  2 +-
 .../nuxt/pages/showcases/Breadcrumbs/Breadcrumbs.vue |  1 -
 .../showcases/Breadcrumbs/BreadcrumbsSeparator.vue   |  1 -
 .../showcases/Breadcrumbs/BreadcrumbsWithIcon.vue    |  1 -
 .../nuxt/pages/showcases/Button/ButtonBlock.vue      |  2 +-
 .../nuxt/pages/showcases/Button/ButtonContent.vue    |  2 +-
 .../nuxt/pages/showcases/Button/ButtonSizes.vue      |  6 +++---
 .../nuxt/pages/showcases/Button/ButtonVariants.vue   |  6 +++---
 .../nuxt/pages/showcases/Drawer/Placement.vue        |  2 +-
 .../showcases/Drawer/TransitionAndCloseButton.vue    |  2 +-
 .../showcases/FormFields/FormFieldsRequired.vue      |  2 +-
 .../nuxt/pages/showcases/MegaMenu/BaseMegaMenu.vue   |  2 --
 .../nuxt/pages/showcases/Modal/ModalBasic.vue        |  6 +++---
 .../nuxt/pages/showcases/Modal/ModalTransition.vue   |  6 +++---
 .../pages/showcases/NavbarTop/NavbarTopFilled.vue    |  1 -
 .../NavbarTop/NavbarTopFilledSimpleMobile.vue        |  1 -
 .../showcases/NavbarTop/NavbarTopSimpleMobile.vue    |  2 +-
 .../nuxt/pages/showcases/Pagination/Pagination.vue   |  2 --
 .../nuxt/pages/showcases/ProductCard/Details.vue     |  8 +++-----
 .../showcases/ProductCard/ProductCardHorizontal.vue  |  2 --
 .../showcases/ProductCard/ProductCardVertical.vue    |  3 +--
 .../nuxt/pages/showcases/ProductSlider/Basic.vue     |  1 -
 .../pages/showcases/QuantitySelector/OutOfStock.vue  |  4 ++--
 .../showcases/QuantitySelector/QuantitySelector.vue  |  2 --
 .../pages/showcases/QuantitySelector/Rounded.vue     |  2 --
 .../pages/showcases/RatingForms/ProductRating.vue    |  4 +---
 .../RatingForms/ProductRatingWithReview.vue          |  2 +-
 .../nuxt/pages/showcases/Search/SearchWithButton.vue |  5 +++--
 .../nuxt/pages/showcases/Search/SearchWithIcon.vue   | 11 ++++++-----
 58 files changed, 64 insertions(+), 140 deletions(-)

diff --git a/apps/docs/components/hooks/usePagination.md b/apps/docs/components/hooks/usePagination.md
index c2afb86e4d..df46198945 100644
--- a/apps/docs/components/hooks/usePagination.md
+++ b/apps/docs/components/hooks/usePagination.md
@@ -29,7 +29,6 @@ function CustomPagination() {
   return (
     <nav className="flex justify-between border-t border-neutral-200" role="navigation" aria-label="pagination">
       <SfButton
-        type="button"
         aria-label="Go to previous page"
         disabled={selectedPage <= 1}
         variant="tertiary"
@@ -150,7 +149,6 @@ function CustomPagination() {
         )}
       </ul>
       <SfButton
-        type="button"
         aria-label="Go to next page"
         disabled={selectedPage >= totalPages}
         variant="tertiary"
@@ -178,7 +176,6 @@ const { totalPages, pages, selectedPage, startPage, endPage, next, prev, setPage
 <nav class="flex justify-between border-t border-neutral-200" role="navigation" aria-label="pagination">
     {{ totalPages }}
     <SfButton
-      type="button"
       aria-label="Go to previous page"
       :disabled="selectedPage <= 1"
       variant="tertiary"
@@ -280,7 +277,6 @@ const { totalPages, pages, selectedPage, startPage, endPage, next, prev, setPage
       </li>
     </ul>
     <SfButton
-      type="button"
       aria-label="Go to next page"
       :disabled="selectedPage >= totalPages"
       variant="tertiary"
@@ -311,7 +307,7 @@ Listed parameters should be passed as object.
 | maxPages      | `number`            |  `1`          | maximum number of pages to display**       |
 
 **there is an additional page displayed when the default number (`1`) is passed. When the current number is `1` then page `2` and the last pages are visible. When the penultimate page is the current one then pages `1` and the last one are visible.
- 
+
 
 ## Return value
 
diff --git a/apps/preview/next/pages/examples/SfDrawer.tsx b/apps/preview/next/pages/examples/SfDrawer.tsx
index b9fa905b2e..2dae9ccca4 100644
--- a/apps/preview/next/pages/examples/SfDrawer.tsx
+++ b/apps/preview/next/pages/examples/SfDrawer.tsx
@@ -60,9 +60,7 @@ function Example() {
 
   return (
     <ComponentExample controls={{ state, controls }}>
-      <SfButton onClick={() => state.set({ ...state.get, open: !state.get.open })} type="button">
-        Open Drawer
-      </SfButton>
+      <SfButton onClick={() => state.set({ ...state.get, open: !state.get.open })}>Open Drawer</SfButton>
 
       <SfDrawer
         {...state.get}
diff --git a/apps/preview/next/pages/examples/SfModal.tsx b/apps/preview/next/pages/examples/SfModal.tsx
index 23f8639068..e87106c509 100644
--- a/apps/preview/next/pages/examples/SfModal.tsx
+++ b/apps/preview/next/pages/examples/SfModal.tsx
@@ -51,10 +51,7 @@ function Example() {
 
   return (
     <ComponentExample controls={{ state, controls }}>
-      <SfButton
-        onClick={() => state.set((currentState) => ({ ...currentState, open: !currentState.open }))}
-        type="button"
-      >
+      <SfButton onClick={() => state.set((currentState) => ({ ...currentState, open: !currentState.open }))}>
         Open Modal
       </SfButton>
 
diff --git a/apps/preview/next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx b/apps/preview/next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx
index d5450a16d2..476fd62385 100644
--- a/apps/preview/next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx
+++ b/apps/preview/next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx
@@ -33,7 +33,6 @@ export function Showcase() {
               <SfButton
                 className="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
                 aria-label="More breadcrumbs"
-                type="button"
                 variant="tertiary"
                 slotPrefix={
                   <SfIconMoreHoriz
diff --git a/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.tsx b/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.tsx
index b89992971d..100fc7ebf8 100644
--- a/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.tsx
+++ b/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.tsx
@@ -33,7 +33,6 @@ export function Showcase() {
               <SfButton
                 className="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
                 aria-label="More breadcrumbs"
-                type="button"
                 variant="tertiary"
                 slotPrefix={
                   <SfIconMoreHoriz
diff --git a/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.tsx b/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.tsx
index 1ef953f500..edaacb9c6a 100644
--- a/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.tsx
+++ b/apps/preview/next/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.tsx
@@ -34,7 +34,6 @@ export function Showcase() {
               <SfButton
                 className="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
                 aria-label="More breadcrumbs"
-                type="button"
                 variant="tertiary"
                 slotPrefix={
                   <SfIconMoreHoriz
diff --git a/apps/preview/next/pages/showcases/Button/ButtonBlock.tsx b/apps/preview/next/pages/showcases/Button/ButtonBlock.tsx
index 6af75b8146..1e0987ee61 100644
--- a/apps/preview/next/pages/showcases/Button/ButtonBlock.tsx
+++ b/apps/preview/next/pages/showcases/Button/ButtonBlock.tsx
@@ -3,11 +3,7 @@ import { ShowcasePageLayout } from '../../showcases';
 import { SfButton } from '@storefront-ui/react';
 
 export default function ButtonBlock() {
-  return (
-    <SfButton type="button" className="w-full">
-      Hello
-    </SfButton>
-  );
+  return <SfButton className="w-full">Hello</SfButton>;
 }
 // #endregion source
 ButtonBlock.getLayout = ShowcasePageLayout;
diff --git a/apps/preview/next/pages/showcases/Button/ButtonContent.tsx b/apps/preview/next/pages/showcases/Button/ButtonContent.tsx
index f041a2a7bd..6b48d81583 100644
--- a/apps/preview/next/pages/showcases/Button/ButtonContent.tsx
+++ b/apps/preview/next/pages/showcases/Button/ButtonContent.tsx
@@ -9,7 +9,7 @@ export default function ButtonContent() {
 
       <SfButton slotSuffix={<SfIconStar />}>Hello</SfButton>
 
-      <SfButton type="button" square aria-label="Add to cart">
+      <SfButton square aria-label="Add to cart">
         <SfIconShoppingCart />
       </SfButton>
     </div>
diff --git a/apps/preview/next/pages/showcases/Button/ButtonSizes.tsx b/apps/preview/next/pages/showcases/Button/ButtonSizes.tsx
index a9fe26d90b..7b1aa5129f 100644
--- a/apps/preview/next/pages/showcases/Button/ButtonSizes.tsx
+++ b/apps/preview/next/pages/showcases/Button/ButtonSizes.tsx
@@ -5,17 +5,11 @@ import { SfButton } from '@storefront-ui/react';
 export default function ButtonSizes() {
   return (
     <div className="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
-      <SfButton type="button" size="sm">
-        Hello
-      </SfButton>
+      <SfButton size="sm">Hello</SfButton>
 
-      <SfButton type="button" size="base">
-        Hello
-      </SfButton>
+      <SfButton size="base">Hello</SfButton>
 
-      <SfButton type="button" size="lg">
-        Hello
-      </SfButton>
+      <SfButton size="lg">Hello</SfButton>
     </div>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Button/ButtonVariants.tsx b/apps/preview/next/pages/showcases/Button/ButtonVariants.tsx
index 272bdd62f7..21f0931073 100644
--- a/apps/preview/next/pages/showcases/Button/ButtonVariants.tsx
+++ b/apps/preview/next/pages/showcases/Button/ButtonVariants.tsx
@@ -5,17 +5,11 @@ import { SfButton } from '@storefront-ui/react';
 export default function ButtonVariants() {
   return (
     <div className="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
-      <SfButton type="button" variant="primary">
-        Hello
-      </SfButton>
+      <SfButton variant="primary">Hello</SfButton>
 
-      <SfButton type="button" variant="secondary">
-        Hello
-      </SfButton>
+      <SfButton variant="secondary">Hello</SfButton>
 
-      <SfButton type="button" variant="tertiary">
-        Hello
-      </SfButton>
+      <SfButton variant="tertiary">Hello</SfButton>
     </div>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Drawer/Placement.tsx b/apps/preview/next/pages/showcases/Drawer/Placement.tsx
index 0e3214dcee..92810ca1ca 100644
--- a/apps/preview/next/pages/showcases/Drawer/Placement.tsx
+++ b/apps/preview/next/pages/showcases/Drawer/Placement.tsx
@@ -23,9 +23,7 @@ export default function DrawerDemo() {
           <option value="left">left</option>
         </select>
       </label>
-      <SfButton onClick={() => setOpen(true)} type="button">
-        Open Drawer
-      </SfButton>
+      <SfButton onClick={() => setOpen(true)}>Open Drawer</SfButton>
 
       <SfDrawer
         open={open}
diff --git a/apps/preview/next/pages/showcases/Drawer/TransitionAndCloseButton.tsx b/apps/preview/next/pages/showcases/Drawer/TransitionAndCloseButton.tsx
index 1e936b83c5..a27227d8c1 100644
--- a/apps/preview/next/pages/showcases/Drawer/TransitionAndCloseButton.tsx
+++ b/apps/preview/next/pages/showcases/Drawer/TransitionAndCloseButton.tsx
@@ -44,9 +44,7 @@ export default function DrawerWithTransition() {
           </label>
         ))}
       </fieldset>
-      <SfButton onClick={() => setOpen(true)} type="button">
-        Open Drawer
-      </SfButton>
+      <SfButton onClick={() => setOpen(true)}>Open Drawer</SfButton>
 
       <Transition ref={nodeRef} in={open} timeout={300}>
         {(state) => (
diff --git a/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx b/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx
index c1716e7852..19bf0cd85b 100644
--- a/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx
+++ b/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx
@@ -677,7 +677,7 @@ export default function FormFields() {
         </fieldset>
         <p className="text-neutral-500 typography-text-sm mt-8">* marked fields are required</p>
         <div className="flex gap-x-4 md:justify-end mt-6">
-          <SfButton type="button" variant="secondary" className="flex-grow md:flex-grow-0">
+          <SfButton variant="secondary" className="flex-grow md:flex-grow-0">
             Clear all
           </SfButton>
           <SfButton type="submit" className="flex-grow md:flex-grow-0">
diff --git a/apps/preview/next/pages/showcases/MegaMenu/BaseMegaMenu.tsx b/apps/preview/next/pages/showcases/MegaMenu/BaseMegaMenu.tsx
index ec44b75f80..ef0a7b43da 100644
--- a/apps/preview/next/pages/showcases/MegaMenu/BaseMegaMenu.tsx
+++ b/apps/preview/next/pages/showcases/MegaMenu/BaseMegaMenu.tsx
@@ -167,7 +167,6 @@ export default function BaseMegaMenu() {
         <div className="flex items-center justify-start h-full max-w-[1536px] w-full px-4 md:px-10">
           <SfButton
             className="block md:hidden text-white bg-transparent font-body hover:bg-primary-800 hover:text-white active:bg-primary-900 active:text-white"
-            type="button"
             aria-haspopup="true"
             aria-expanded={isOpen}
             variant="tertiary"
@@ -192,7 +191,6 @@ export default function BaseMegaMenu() {
           </a>
           <SfButton
             className="hidden md:flex text-white bg-transparent font-body hover:bg-primary-800 hover:text-white active:bg-primary-900 active:text-white"
-            type="button"
             aria-haspopup="true"
             aria-expanded={isOpen}
             slotSuffix={<SfIconExpandMore className="hidden md:inline-flex" />}
diff --git a/apps/preview/next/pages/showcases/Modal/ModalBasic.tsx b/apps/preview/next/pages/showcases/Modal/ModalBasic.tsx
index 77187b95f7..19da714f2c 100644
--- a/apps/preview/next/pages/showcases/Modal/ModalBasic.tsx
+++ b/apps/preview/next/pages/showcases/Modal/ModalBasic.tsx
@@ -7,9 +7,7 @@ export default function ModalDemo() {
 
   return (
     <>
-      <SfButton type="button" onClick={open}>
-        To Checkout
-      </SfButton>
+      <SfButton onClick={open}>To Checkout</SfButton>
 
       <SfModal
         open={isOpen}
@@ -33,12 +31,10 @@ export default function ModalDemo() {
           proceeding to checkout page?
         </p>
         <footer className="flex justify-end gap-4 mt-4">
-          <SfButton type="button" variant="secondary" onClick={close}>
+          <SfButton variant="secondary" onClick={close}>
             Skip
           </SfButton>
-          <SfButton type="button" onClick={close}>
-            Yes!
-          </SfButton>
+          <SfButton onClick={close}>Yes!</SfButton>
         </footer>
       </SfModal>
     </>
diff --git a/apps/preview/next/pages/showcases/Modal/ModalTransition.tsx b/apps/preview/next/pages/showcases/Modal/ModalTransition.tsx
index 2af03c8684..04f2e979ac 100644
--- a/apps/preview/next/pages/showcases/Modal/ModalTransition.tsx
+++ b/apps/preview/next/pages/showcases/Modal/ModalTransition.tsx
@@ -13,9 +13,7 @@ export default function ModalTransition() {
 
   return (
     <>
-      <SfButton type="button" onClick={open}>
-        To Checkout
-      </SfButton>
+      <SfButton onClick={open}>To Checkout</SfButton>
 
       {/* Backdrop */}
       <CSSTransition
@@ -67,12 +65,10 @@ export default function ModalTransition() {
             proceeding to checkout page?
           </p>
           <footer className="flex justify-end gap-4 mt-4">
-            <SfButton type="button" variant="secondary" onClick={close}>
+            <SfButton variant="secondary" onClick={close}>
               Skip
             </SfButton>
-            <SfButton type="button" onClick={close}>
-              Yes!
-            </SfButton>
+            <SfButton onClick={close}>Yes!</SfButton>
           </footer>
         </SfModal>
       </CSSTransition>
diff --git a/apps/preview/next/pages/showcases/NavbarTop/NavbarTop.tsx b/apps/preview/next/pages/showcases/NavbarTop/NavbarTop.tsx
index 640b2695f1..babd17b172 100644
--- a/apps/preview/next/pages/showcases/NavbarTop/NavbarTop.tsx
+++ b/apps/preview/next/pages/showcases/NavbarTop/NavbarTop.tsx
@@ -70,7 +70,6 @@ export default function TopNav() {
         </SfButton>
         <SfButton
           className="hidden lg:flex lg:mr-4"
-          type="button"
           variant="tertiary"
           slotSuffix={<SfIconExpandMore className="hidden lg:block" />}
         >
diff --git a/apps/preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx b/apps/preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx
index ee93c160e8..9d5805bd10 100644
--- a/apps/preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx
+++ b/apps/preview/next/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.tsx
@@ -73,7 +73,6 @@ export default function TopNavFilled() {
         </SfButton>
         <SfButton
           className="hidden lg:flex lg:mr-4 text-white hover:text-white active:text-white hover:bg-primary-800 active:bg-primary-900"
-          type="button"
           variant="tertiary"
           slotSuffix={<SfIconExpandMore className="hidden lg:block" />}
         >
diff --git a/apps/preview/next/pages/showcases/Pagination/Pagination.tsx b/apps/preview/next/pages/showcases/Pagination/Pagination.tsx
index 3aa7b33da6..2dcca8375d 100644
--- a/apps/preview/next/pages/showcases/Pagination/Pagination.tsx
+++ b/apps/preview/next/pages/showcases/Pagination/Pagination.tsx
@@ -20,7 +20,6 @@ export function Showcase() {
       aria-label="pagination"
     >
       <SfButton
-        type="button"
         size="lg"
         className="gap-3 !px-3 sm:px-6"
         aria-label="Go to previous page"
@@ -150,7 +149,6 @@ export function Showcase() {
         )}
       </ul>
       <SfButton
-        type="button"
         size="lg"
         aria-label="Go to next page"
         disabled={selectedPage >= totalPages}
diff --git a/apps/preview/next/pages/showcases/ProductCard/Details.tsx b/apps/preview/next/pages/showcases/ProductCard/Details.tsx
index 24cc31dbb7..ded5b36027 100644
--- a/apps/preview/next/pages/showcases/ProductCard/Details.tsx
+++ b/apps/preview/next/pages/showcases/ProductCard/Details.tsx
@@ -64,7 +64,6 @@ export default function ProductDetails() {
           <div className="flex flex-col items-stretch xs:items-center xs:inline-flex">
             <div className="flex border border-neutral-300 rounded-md">
               <SfButton
-                type="button"
                 variant="tertiary"
                 square
                 className="rounded-r-none p-3"
@@ -86,7 +85,6 @@ export default function ProductDetails() {
                 onChange={handleOnChange}
               />
               <SfButton
-                type="button"
                 variant="tertiary"
                 square
                 className="rounded-l-none p-3"
@@ -102,15 +100,15 @@ export default function ProductDetails() {
               <strong className="text-neutral-900">{max}</strong> in stock
             </p>
           </div>
-          <SfButton type="button" size="lg" className="w-full xs:ml-4" slotPrefix={<SfIconShoppingCart size="sm" />}>
+          <SfButton size="lg" className="w-full xs:ml-4" slotPrefix={<SfIconShoppingCart size="sm" />}>
             Add to cart
           </SfButton>
         </div>
         <div className="flex justify-center mt-4 gap-x-4">
-          <SfButton type="button" size="sm" variant="tertiary" slotPrefix={<SfIconCompareArrows size="sm" />}>
+          <SfButton size="sm" variant="tertiary" slotPrefix={<SfIconCompareArrows size="sm" />}>
             Compare
           </SfButton>
-          <SfButton type="button" size="sm" variant="tertiary" slotPrefix={<SfIconFavorite size="sm" />}>
+          <SfButton size="sm" variant="tertiary" slotPrefix={<SfIconFavorite size="sm" />}>
             Add to list
           </SfButton>
         </div>
diff --git a/apps/preview/next/pages/showcases/ProductCard/ProductCardHorizontal.tsx b/apps/preview/next/pages/showcases/ProductCard/ProductCardHorizontal.tsx
index 2afea39f0a..690c052acc 100644
--- a/apps/preview/next/pages/showcases/ProductCard/ProductCardHorizontal.tsx
+++ b/apps/preview/next/pages/showcases/ProductCard/ProductCardHorizontal.tsx
@@ -53,7 +53,6 @@ export default function ProductCardHorizontal() {
           <div className="flex items-center justify-between mt-4 sm:mt-0">
             <div className="flex border border-neutral-300 rounded-md">
               <SfButton
-                type="button"
                 variant="tertiary"
                 square
                 className="rounded-r-none"
@@ -75,7 +74,6 @@ export default function ProductCardHorizontal() {
                 onChange={handleOnChange}
               />
               <SfButton
-                type="button"
                 variant="tertiary"
                 square
                 className="rounded-l-none"
diff --git a/apps/preview/next/pages/showcases/ProductCard/ProductCardVertical.tsx b/apps/preview/next/pages/showcases/ProductCard/ProductCardVertical.tsx
index d4bb23ce0e..ad01f1d491 100644
--- a/apps/preview/next/pages/showcases/ProductCard/ProductCardVertical.tsx
+++ b/apps/preview/next/pages/showcases/ProductCard/ProductCardVertical.tsx
@@ -16,7 +16,6 @@ export default function ProductCardVertical() {
           />
         </SfLink>
         <SfButton
-          type="button"
           variant="tertiary"
           size="sm"
           square
@@ -41,7 +40,7 @@ export default function ProductCardVertical() {
           Lightweight • Non slip • Flexible outsole • Easy to wear on and off
         </p>
         <span className="block pb-2 font-bold typography-text-lg">$2345,99</span>
-        <SfButton type="button" size="sm" slotPrefix={<SfIconShoppingCart size="sm" />}>
+        <SfButton size="sm" slotPrefix={<SfIconShoppingCart size="sm" />}>
           Add to cart
         </SfButton>
       </div>
diff --git a/apps/preview/next/pages/showcases/ProductSlider/Basic.tsx b/apps/preview/next/pages/showcases/ProductSlider/Basic.tsx
index 9c470126fd..8999ad9ac7 100644
--- a/apps/preview/next/pages/showcases/ProductSlider/Basic.tsx
+++ b/apps/preview/next/pages/showcases/ProductSlider/Basic.tsx
@@ -84,7 +84,6 @@ export default function GalleryVertical() {
               />
             </SfLink>
             <SfButton
-              type="button"
               variant="tertiary"
               size="sm"
               square
diff --git a/apps/preview/next/pages/showcases/QuantitySelector/OutOfStock.tsx b/apps/preview/next/pages/showcases/QuantitySelector/OutOfStock.tsx
index 1faadad2a0..2ddbb2eea7 100644
--- a/apps/preview/next/pages/showcases/QuantitySelector/OutOfStock.tsx
+++ b/apps/preview/next/pages/showcases/QuantitySelector/OutOfStock.tsx
@@ -12,7 +12,6 @@ export default function OutOfStockDemo() {
       <div className="flex rounded-md border border-disabled-200 bg-disabled-100">
         <SfButton
           variant="tertiary"
-          type="button"
           square
           disabled
           aria-controls={inputId}
@@ -31,7 +30,7 @@ export default function OutOfStockDemo() {
           max={max}
         />
 
-        <SfButton variant="tertiary" type="button" square disabled aria-controls={inputId} aria-label="Increase value">
+        <SfButton variant="tertiary" square disabled aria-controls={inputId} aria-label="Increase value">
           <SfIconAdd />
         </SfButton>
       </div>
diff --git a/apps/preview/next/pages/showcases/QuantitySelector/QuantitySelector.tsx b/apps/preview/next/pages/showcases/QuantitySelector/QuantitySelector.tsx
index aab5cdd98a..825e385417 100644
--- a/apps/preview/next/pages/showcases/QuantitySelector/QuantitySelector.tsx
+++ b/apps/preview/next/pages/showcases/QuantitySelector/QuantitySelector.tsx
@@ -19,7 +19,6 @@ export default function QuantitySelector() {
     <div className="inline-flex flex-col items-center">
       <div className="flex border border-neutral-300 rounded-md">
         <SfButton
-          type="button"
           variant="tertiary"
           square
           className="rounded-r-none"
@@ -41,7 +40,6 @@ export default function QuantitySelector() {
           onChange={handleOnChange}
         />
         <SfButton
-          type="button"
           variant="tertiary"
           square
           className="rounded-l-none"
diff --git a/apps/preview/next/pages/showcases/QuantitySelector/Rounded.tsx b/apps/preview/next/pages/showcases/QuantitySelector/Rounded.tsx
index 4b6d3a496b..0704d12d8e 100644
--- a/apps/preview/next/pages/showcases/QuantitySelector/Rounded.tsx
+++ b/apps/preview/next/pages/showcases/QuantitySelector/Rounded.tsx
@@ -19,7 +19,6 @@ export default function QuantitySelector() {
     <div className="inline-flex flex-col items-center">
       <div className="flex">
         <SfButton
-          type="button"
           square
           className="!rounded-full"
           disabled={value <= min}
@@ -41,7 +40,6 @@ export default function QuantitySelector() {
         />
 
         <SfButton
-          type="button"
           square
           className="!rounded-full"
           disabled={value >= max}
diff --git a/apps/preview/next/pages/showcases/RatingForms/ProductRating.tsx b/apps/preview/next/pages/showcases/RatingForms/ProductRating.tsx
index 32cfaad215..4ac2bf4729 100644
--- a/apps/preview/next/pages/showcases/RatingForms/ProductRating.tsx
+++ b/apps/preview/next/pages/showcases/RatingForms/ProductRating.tsx
@@ -11,7 +11,7 @@ export default function ProductRating() {
 
   return (
     <>
-      <SfButton type="button" className="absolute right-1/2 top-1/2 translate-x-[50%]" onClick={open}>
+      <SfButton className="absolute right-1/2 top-1/2 translate-x-[50%]" onClick={open}>
         Open rating modal again
       </SfButton>
       <SfModal
diff --git a/apps/preview/next/pages/showcases/RatingForms/ProductRatingWithReview.tsx b/apps/preview/next/pages/showcases/RatingForms/ProductRatingWithReview.tsx
index bfdcecf830..c945e0580d 100644
--- a/apps/preview/next/pages/showcases/RatingForms/ProductRatingWithReview.tsx
+++ b/apps/preview/next/pages/showcases/RatingForms/ProductRatingWithReview.tsx
@@ -72,7 +72,7 @@ export default function ProductRatingWithReview() {
             <SfInput value={username} onChange={(event) => setUsername(event.target.value)} />
           </label>
           <div className="flex justify-end gap-x-4">
-            <SfButton variant="secondary" type="button" className="flex-1 md:flex-initial">
+            <SfButton variant="secondary" className="flex-1 md:flex-initial">
               Cancel
             </SfButton>
             <SfButton type="submit" className="flex-1 md:flex-initial">
diff --git a/apps/preview/nuxt/pages/examples/SfDrawer.vue b/apps/preview/nuxt/pages/examples/SfDrawer.vue
index 3eacf80f6b..2424deed2b 100644
--- a/apps/preview/nuxt/pages/examples/SfDrawer.vue
+++ b/apps/preview/nuxt/pages/examples/SfDrawer.vue
@@ -1,6 +1,6 @@
 <template>
   <ComponentExample :controls-attrs="controlsAttrs">
-    <SfButton type="button" @click="state.modelValue = !state.modelValue"> Open Drawer </SfButton>
+    <SfButton @click="state.modelValue = !state.modelValue"> Open Drawer </SfButton>
 
     <SfDrawer
       v-bind="state"
diff --git a/apps/preview/nuxt/pages/examples/SfModal.vue b/apps/preview/nuxt/pages/examples/SfModal.vue
index e4431f5617..dc1284c714 100644
--- a/apps/preview/nuxt/pages/examples/SfModal.vue
+++ b/apps/preview/nuxt/pages/examples/SfModal.vue
@@ -1,6 +1,6 @@
 <template>
   <ComponentExample :controls-attrs="controlsAttrs">
-    <SfButton type="button" @click="state.modelValue = !state.modelValue"> Open Modal </SfButton>
+    <SfButton @click="state.modelValue = !state.modelValue"> Open Modal </SfButton>
 
     <SfModal v-bind="state" v-model="state.modelValue" class="max-w-sm">
       <template v-if="state.SlotDefault">{{ state.SlotDefault }}</template>
diff --git a/apps/preview/nuxt/pages/showcases/Breadcrumbs/Breadcrumbs.vue b/apps/preview/nuxt/pages/showcases/Breadcrumbs/Breadcrumbs.vue
index 4ebb38f9a3..420c67d513 100644
--- a/apps/preview/nuxt/pages/showcases/Breadcrumbs/Breadcrumbs.vue
+++ b/apps/preview/nuxt/pages/showcases/Breadcrumbs/Breadcrumbs.vue
@@ -7,7 +7,6 @@
             <SfButton
               class="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
               aria-label="More breadcrumbs"
-              type="button"
               variant="tertiary"
               square
               @click="toggle"
diff --git a/apps/preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.vue b/apps/preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.vue
index 600167dc7c..c6d0b878f1 100644
--- a/apps/preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.vue
+++ b/apps/preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.vue
@@ -7,7 +7,6 @@
             <SfButton
               class="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
               aria-label="More breadcrumbs"
-              type="button"
               variant="tertiary"
               square
               @click="toggle"
diff --git a/apps/preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.vue b/apps/preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.vue
index 8427940eb6..0066f5e65a 100644
--- a/apps/preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.vue
+++ b/apps/preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.vue
@@ -7,7 +7,6 @@
             <SfButton
               class="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
               aria-label="More breadcrumbs"
-              type="button"
               variant="tertiary"
               square
               @click="toggle"
diff --git a/apps/preview/nuxt/pages/showcases/Button/ButtonBlock.vue b/apps/preview/nuxt/pages/showcases/Button/ButtonBlock.vue
index d67cded6f0..4e4de7034a 100644
--- a/apps/preview/nuxt/pages/showcases/Button/ButtonBlock.vue
+++ b/apps/preview/nuxt/pages/showcases/Button/ButtonBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <SfButton type="button" class="w-full"> Hello </SfButton>
+  <SfButton class="w-full"> Hello </SfButton>
 </template>
 
 <script lang="ts" setup>
diff --git a/apps/preview/nuxt/pages/showcases/Button/ButtonContent.vue b/apps/preview/nuxt/pages/showcases/Button/ButtonContent.vue
index 9482a131e7..2cd889a0aa 100644
--- a/apps/preview/nuxt/pages/showcases/Button/ButtonContent.vue
+++ b/apps/preview/nuxt/pages/showcases/Button/ButtonContent.vue
@@ -14,7 +14,7 @@
       Hello
     </SfButton>
 
-    <SfButton type="button" :square="true" aria-label="Add to cart">
+    <SfButton :square="true" aria-label="Add to cart">
       <SfIconAdd />
     </SfButton>
   </div>
diff --git a/apps/preview/nuxt/pages/showcases/Button/ButtonSizes.vue b/apps/preview/nuxt/pages/showcases/Button/ButtonSizes.vue
index 42d89ea45f..074f9ccd46 100644
--- a/apps/preview/nuxt/pages/showcases/Button/ButtonSizes.vue
+++ b/apps/preview/nuxt/pages/showcases/Button/ButtonSizes.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
-    <SfButton type="button" size="sm">Hello</SfButton>
+    <SfButton size="sm">Hello</SfButton>
 
-    <SfButton type="button">Hello</SfButton>
+    <SfButton>Hello</SfButton>
 
-    <SfButton type="button" size="lg">Hello</SfButton>
+    <SfButton size="lg">Hello</SfButton>
   </div>
 </template>
 
diff --git a/apps/preview/nuxt/pages/showcases/Button/ButtonVariants.vue b/apps/preview/nuxt/pages/showcases/Button/ButtonVariants.vue
index e38eaf59f6..24249ec1b0 100644
--- a/apps/preview/nuxt/pages/showcases/Button/ButtonVariants.vue
+++ b/apps/preview/nuxt/pages/showcases/Button/ButtonVariants.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
-    <SfButton type="button" variant="primary"> Hello </SfButton>
+    <SfButton variant="primary"> Hello </SfButton>
 
-    <SfButton type="button" variant="secondary"> Hello </SfButton>
+    <SfButton variant="secondary"> Hello </SfButton>
 
-    <SfButton type="button" variant="tertiary"> Hello </SfButton>
+    <SfButton variant="tertiary"> Hello </SfButton>
   </div>
 </template>
 
diff --git a/apps/preview/nuxt/pages/showcases/Drawer/Placement.vue b/apps/preview/nuxt/pages/showcases/Drawer/Placement.vue
index 849496b9b5..6631670a4f 100644
--- a/apps/preview/nuxt/pages/showcases/Drawer/Placement.vue
+++ b/apps/preview/nuxt/pages/showcases/Drawer/Placement.vue
@@ -8,7 +8,7 @@
       <option value="left" selected>left</option>
     </select>
   </label>
-  <SfButton type="button" @click="open = true"> Open Drawer </SfButton>
+  <SfButton @click="open = true"> Open Drawer </SfButton>
 
   <SfDrawer
     v-model="open"
diff --git a/apps/preview/nuxt/pages/showcases/Drawer/TransitionAndCloseButton.vue b/apps/preview/nuxt/pages/showcases/Drawer/TransitionAndCloseButton.vue
index e2615c06f4..caabbf8880 100644
--- a/apps/preview/nuxt/pages/showcases/Drawer/TransitionAndCloseButton.vue
+++ b/apps/preview/nuxt/pages/showcases/Drawer/TransitionAndCloseButton.vue
@@ -5,7 +5,7 @@
       <span class="ml-2">{{ label }}</span>
     </label>
   </fieldset>
-  <SfButton type="button" @click="open = true"> Open Drawer </SfButton>
+  <SfButton @click="open = true"> Open Drawer </SfButton>
 
   <transition
     enter-active-class="transition duration-500 ease-in-out"
diff --git a/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue b/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue
index d27f43c813..feffcf83c3 100644
--- a/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue
+++ b/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue
@@ -276,7 +276,7 @@
       </fieldset>
       <p class="text-neutral-500 typography-text-sm mt-8">* marked fields are required</p>
       <div class="flex gap-x-4 md:justify-end mt-6">
-        <SfButton type="button" variant="secondary" class="flex-grow md:flex-grow-0"> Clear all </SfButton>
+        <SfButton variant="secondary" class="flex-grow md:flex-grow-0"> Clear all </SfButton>
         <SfButton type="submit" class="flex-grow md:flex-grow-0"> Submit </SfButton>
       </div>
     </form>
diff --git a/apps/preview/nuxt/pages/showcases/MegaMenu/BaseMegaMenu.vue b/apps/preview/nuxt/pages/showcases/MegaMenu/BaseMegaMenu.vue
index 4d8cde4bcf..db9f53d05d 100644
--- a/apps/preview/nuxt/pages/showcases/MegaMenu/BaseMegaMenu.vue
+++ b/apps/preview/nuxt/pages/showcases/MegaMenu/BaseMegaMenu.vue
@@ -8,7 +8,6 @@
       <div class="flex items-center justify-start h-full max-w-[1536px] w-full px-4 md:px-10">
         <SfButton
           class="block md:hidden text-white font-body bg-transparent hover:bg-primary-800 hover:text-white active:bg-primary-900 active:text-white"
-          type="button"
           :aria-haspopup="true"
           :aria-expanded="isOpen"
           variant="tertiary"
@@ -33,7 +32,6 @@
         </a>
         <SfButton
           class="hidden md:flex text-white font-body bg-transparent hover:bg-primary-800 hover:text-white active:bg-primary-900 active:text-white"
-          type="button"
           :aria-haspopup="true"
           :aria-expanded="isOpen"
           variant="tertiary"
diff --git a/apps/preview/nuxt/pages/showcases/Modal/ModalBasic.vue b/apps/preview/nuxt/pages/showcases/Modal/ModalBasic.vue
index d7b1733e1e..6c960d7e19 100644
--- a/apps/preview/nuxt/pages/showcases/Modal/ModalBasic.vue
+++ b/apps/preview/nuxt/pages/showcases/Modal/ModalBasic.vue
@@ -1,5 +1,5 @@
 <template>
-  <SfButton type="button" @click="open">To Checkout</SfButton>
+  <SfButton @click="open">To Checkout</SfButton>
 
   <SfModal
     v-model="isOpen"
@@ -22,8 +22,8 @@
       to checkout page?
     </p>
     <footer class="flex justify-end gap-4 mt-4">
-      <SfButton type="button" variant="secondary" @click="close">Skip</SfButton>
-      <SfButton type="button" @click="close">Yes!</SfButton>
+      <SfButton variant="secondary" @click="close">Skip</SfButton>
+      <SfButton @click="close">Yes!</SfButton>
     </footer>
   </SfModal>
 </template>
diff --git a/apps/preview/nuxt/pages/showcases/Modal/ModalTransition.vue b/apps/preview/nuxt/pages/showcases/Modal/ModalTransition.vue
index 3a2e583891..5acf0634ea 100644
--- a/apps/preview/nuxt/pages/showcases/Modal/ModalTransition.vue
+++ b/apps/preview/nuxt/pages/showcases/Modal/ModalTransition.vue
@@ -1,5 +1,5 @@
 <template>
-  <SfButton type="button" @click="open">To Checkout</SfButton>
+  <SfButton @click="open">To Checkout</SfButton>
 
   <!-- Backdrop -->
   <transition
@@ -43,8 +43,8 @@
         proceeding to checkout page?
       </p>
       <footer class="flex justify-end gap-4 mt-4">
-        <SfButton type="button" variant="secondary" @click="close">Skip</SfButton>
-        <SfButton type="button" @click="close">Yes!</SfButton>
+        <SfButton variant="secondary" @click="close">Skip</SfButton>
+        <SfButton @click="close">Yes!</SfButton>
       </footer>
     </SfModal>
   </transition>
diff --git a/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilled.vue b/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilled.vue
index 70732f1300..407786a699 100644
--- a/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilled.vue
+++ b/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilled.vue
@@ -25,7 +25,6 @@
       </SfButton>
       <SfButton
         class="hidden lg:flex text-white hover:text-white active:text-white hover:bg-primary-800 active:bg-primary-900 lg:mr-4"
-        type="button"
         variant="tertiary"
       >
         <template #suffix>
diff --git a/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.vue b/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.vue
index bcf575cd03..c4eeff91bb 100644
--- a/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.vue
+++ b/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilledSimpleMobile.vue
@@ -30,7 +30,6 @@
       </SfButton>
       <SfButton
         class="hidden lg:flex text-white hover:text-white active:text-white hover:bg-primary-800 active:bg-primary-900 lg:mr-4"
-        type="button"
         variant="tertiary"
       >
         <template #suffix>
diff --git a/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopSimpleMobile.vue b/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopSimpleMobile.vue
index ac2d7e31ab..ac7cbf73e5 100644
--- a/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopSimpleMobile.vue
+++ b/apps/preview/nuxt/pages/showcases/NavbarTop/NavbarTopSimpleMobile.vue
@@ -28,7 +28,7 @@
       >
         <SfIconMenu />
       </SfButton>
-      <SfButton class="hidden lg:flex lg:mr-4" type="button" variant="tertiary">
+      <SfButton class="hidden lg:flex lg:mr-4" variant="tertiary">
         <template #suffix>
           <SfIconExpandMore class="hidden lg:block" />
         </template>
diff --git a/apps/preview/nuxt/pages/showcases/Pagination/Pagination.vue b/apps/preview/nuxt/pages/showcases/Pagination/Pagination.vue
index 6b26c40362..e4b281ba8e 100644
--- a/apps/preview/nuxt/pages/showcases/Pagination/Pagination.vue
+++ b/apps/preview/nuxt/pages/showcases/Pagination/Pagination.vue
@@ -1,7 +1,6 @@
 <template>
   <nav class="flex justify-between items-end border-t border-neutral-200" role="navigation" aria-label="pagination">
     <SfButton
-      type="button"
       size="lg"
       aria-label="Go to previous page"
       :disabled="selectedPage <= 1"
@@ -110,7 +109,6 @@
       </li>
     </ul>
     <SfButton
-      type="button"
       size="lg"
       aria-label="Go to next page"
       :disabled="selectedPage >= totalPages"
diff --git a/apps/preview/nuxt/pages/showcases/ProductCard/Details.vue b/apps/preview/nuxt/pages/showcases/ProductCard/Details.vue
index 074f32f17c..61fd97b37d 100644
--- a/apps/preview/nuxt/pages/showcases/ProductCard/Details.vue
+++ b/apps/preview/nuxt/pages/showcases/ProductCard/Details.vue
@@ -31,7 +31,6 @@
         <div class="flex flex-col items-stretch xs:items-center xs:inline-flex">
           <div class="flex border border-neutral-300 rounded-md">
             <SfButton
-              type="button"
               variant="tertiary"
               :disabled="count <= min"
               square
@@ -52,7 +51,6 @@
               @input="handleOnChange"
             />
             <SfButton
-              type="button"
               variant="tertiary"
               :disabled="count >= max"
               square
@@ -68,7 +66,7 @@
             <strong class="text-neutral-900">{{ max }}</strong> in stock
           </p>
         </div>
-        <SfButton type="button" size="lg" class="w-full xs:ml-4">
+        <SfButton size="lg" class="w-full xs:ml-4">
           <template #prefix>
             <SfIconShoppingCart size="sm" />
           </template>
@@ -76,13 +74,13 @@
         </SfButton>
       </div>
       <div class="flex justify-center mt-4 gap-x-4">
-        <SfButton type="button" size="sm" variant="tertiary">
+        <SfButton size="sm" variant="tertiary">
           <template #prefix>
             <SfIconCompareArrows size="sm" />
           </template>
           Compare
         </SfButton>
-        <SfButton type="button" size="sm" variant="tertiary">
+        <SfButton size="sm" variant="tertiary">
           <SfIconFavorite size="sm" />
           Add to list
         </SfButton>
diff --git a/apps/preview/nuxt/pages/showcases/ProductCard/ProductCardHorizontal.vue b/apps/preview/nuxt/pages/showcases/ProductCard/ProductCardHorizontal.vue
index 5379795847..4ab74570d8 100644
--- a/apps/preview/nuxt/pages/showcases/ProductCard/ProductCardHorizontal.vue
+++ b/apps/preview/nuxt/pages/showcases/ProductCard/ProductCardHorizontal.vue
@@ -36,7 +36,6 @@
         <div class="flex items-center justify-between mt-4 sm:mt-0">
           <div class="flex border border-neutral-300 rounded-md">
             <SfButton
-              type="button"
               variant="tertiary"
               :disabled="count <= min"
               square
@@ -57,7 +56,6 @@
               @input="handleOnChange"
             />
             <SfButton
-              type="button"
               variant="tertiary"
               :disabled="count >= max"
               square
diff --git a/apps/preview/nuxt/pages/showcases/ProductCard/ProductCardVertical.vue b/apps/preview/nuxt/pages/showcases/ProductCard/ProductCardVertical.vue
index 711c37bb26..7c6cda66bb 100644
--- a/apps/preview/nuxt/pages/showcases/ProductCard/ProductCardVertical.vue
+++ b/apps/preview/nuxt/pages/showcases/ProductCard/ProductCardVertical.vue
@@ -11,7 +11,6 @@
         />
       </SfLink>
       <SfButton
-        type="button"
         variant="tertiary"
         size="sm"
         square
@@ -34,7 +33,7 @@
         Lightweight • Non slip • Flexible outsole • Easy to wear on and off
       </p>
       <span class="block pb-2 font-bold typography-text-lg">$2345,99</span>
-      <SfButton type="button" size="sm">
+      <SfButton size="sm">
         <template #prefix>
           <SfIconShoppingCart size="sm" />
         </template>
diff --git a/apps/preview/nuxt/pages/showcases/ProductSlider/Basic.vue b/apps/preview/nuxt/pages/showcases/ProductSlider/Basic.vue
index 607f60b18c..d7426145d7 100644
--- a/apps/preview/nuxt/pages/showcases/ProductSlider/Basic.vue
+++ b/apps/preview/nuxt/pages/showcases/ProductSlider/Basic.vue
@@ -32,7 +32,6 @@
           />
         </SfLink>
         <SfButton
-          type="button"
           variant="tertiary"
           size="sm"
           square
diff --git a/apps/preview/nuxt/pages/showcases/QuantitySelector/OutOfStock.vue b/apps/preview/nuxt/pages/showcases/QuantitySelector/OutOfStock.vue
index 604a330134..0fc1a059a6 100644
--- a/apps/preview/nuxt/pages/showcases/QuantitySelector/OutOfStock.vue
+++ b/apps/preview/nuxt/pages/showcases/QuantitySelector/OutOfStock.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="inline-flex flex-col items-center">
     <div class="flex rounded-md border border-disabled-200 bg-disabled-100">
-      <SfButton variant="tertiary" type="button" square disabled :aria-controls="inputId" aria-label="Decrease value">
+      <SfButton variant="tertiary" square disabled :aria-controls="inputId" aria-label="Decrease value">
         <SfIconRemove />
       </SfButton>
       <input
@@ -14,7 +14,7 @@
         :max="max"
       />
 
-      <SfButton variant="tertiary" type="button" square disabled :aria-controls="inputId" aria-label="Increase value">
+      <SfButton variant="tertiary" square disabled :aria-controls="inputId" aria-label="Increase value">
         <SfIconAdd />
       </SfButton>
     </div>
diff --git a/apps/preview/nuxt/pages/showcases/QuantitySelector/QuantitySelector.vue b/apps/preview/nuxt/pages/showcases/QuantitySelector/QuantitySelector.vue
index db57bb9157..2b10f23bb0 100644
--- a/apps/preview/nuxt/pages/showcases/QuantitySelector/QuantitySelector.vue
+++ b/apps/preview/nuxt/pages/showcases/QuantitySelector/QuantitySelector.vue
@@ -2,7 +2,6 @@
   <div class="inline-flex flex-col items-center">
     <div class="flex border border-neutral-300 rounded-md">
       <SfButton
-        type="button"
         variant="tertiary"
         :disabled="count <= min"
         square
@@ -23,7 +22,6 @@
         @input="handleOnChange"
       />
       <SfButton
-        type="button"
         variant="tertiary"
         :disabled="count >= max"
         square
diff --git a/apps/preview/nuxt/pages/showcases/QuantitySelector/Rounded.vue b/apps/preview/nuxt/pages/showcases/QuantitySelector/Rounded.vue
index e9335cdcbf..cc6fb6cf44 100644
--- a/apps/preview/nuxt/pages/showcases/QuantitySelector/Rounded.vue
+++ b/apps/preview/nuxt/pages/showcases/QuantitySelector/Rounded.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="flex">
     <SfButton
-      type="button"
       square
       class="!rounded-full"
       :disabled="count <= min"
@@ -22,7 +21,6 @@
     />
 
     <SfButton
-      type="button"
       square
       class="!rounded-full"
       :disabled="count >= max"
diff --git a/apps/preview/nuxt/pages/showcases/RatingForms/ProductRating.vue b/apps/preview/nuxt/pages/showcases/RatingForms/ProductRating.vue
index ed90448a72..20c63e752a 100644
--- a/apps/preview/nuxt/pages/showcases/RatingForms/ProductRating.vue
+++ b/apps/preview/nuxt/pages/showcases/RatingForms/ProductRating.vue
@@ -1,7 +1,5 @@
 <template>
-  <SfButton type="button" class="absolute right-1/2 top-1/2 translate-x-[50%]" @click="open">
-    Open rating modal again
-  </SfButton>
+  <SfButton class="absolute right-1/2 top-1/2 translate-x-[50%]" @click="open"> Open rating modal again </SfButton>
   <SfModal
     v-model="isOpen"
     class="min-w-[376px] md:w-[480px]"
diff --git a/apps/preview/nuxt/pages/showcases/RatingForms/ProductRatingWithReview.vue b/apps/preview/nuxt/pages/showcases/RatingForms/ProductRatingWithReview.vue
index 7bb9b5be02..70e4ecc3cb 100644
--- a/apps/preview/nuxt/pages/showcases/RatingForms/ProductRatingWithReview.vue
+++ b/apps/preview/nuxt/pages/showcases/RatingForms/ProductRatingWithReview.vue
@@ -39,7 +39,7 @@
           <SfInput v-model="usernameModelValue" />
         </label>
         <div class="flex justify-end gap-x-4">
-          <SfButton variant="secondary" type="button" class="flex-1 md:flex-initial">Cancel</SfButton>
+          <SfButton variant="secondary" class="flex-1 md:flex-initial">Cancel</SfButton>
           <SfButton type="submit" class="flex-1 md:flex-initial">Submit Review</SfButton>
         </div>
       </div>
diff --git a/apps/preview/nuxt/pages/showcases/Search/SearchWithButton.vue b/apps/preview/nuxt/pages/showcases/Search/SearchWithButton.vue
index 74a565fe6e..adb6d5efe7 100644
--- a/apps/preview/nuxt/pages/showcases/Search/SearchWithButton.vue
+++ b/apps/preview/nuxt/pages/showcases/Search/SearchWithButton.vue
@@ -19,8 +19,9 @@
             class="flex rounded-md focus-visible:outline focus-visible:outline-offset"
             @click="reset"
           >
-            <SfIconCancel /></button
-        ></template>
+            <SfIconCancel />
+          </button>
+        </template>
       </SfInput>
       <SfButton type="submit" class="rounded-l-none">Search</SfButton>
     </div>
diff --git a/apps/preview/nuxt/pages/showcases/Search/SearchWithIcon.vue b/apps/preview/nuxt/pages/showcases/Search/SearchWithIcon.vue
index 89fa589851..3f14d546ad 100644
--- a/apps/preview/nuxt/pages/showcases/Search/SearchWithIcon.vue
+++ b/apps/preview/nuxt/pages/showcases/Search/SearchWithIcon.vue
@@ -19,12 +19,13 @@
             class="flex rounded-md focus-visible:outline focus-visible:outline-offset"
             @click="reset"
           >
-            <SfIconCancel /></button
-        ></template>
+            <SfIconCancel />
+          </button>
+        </template>
       </SfInput>
-      <SfButton type="submit" square aria-label="Search for a specific phrase on the page" class="rounded-l-none"
-        ><SfIconSearch
-      /></SfButton>
+      <SfButton type="submit" square aria-label="Search for a specific phrase on the page" class="rounded-l-none">
+        <SfIconSearch />
+      </SfButton>
     </div>
     <div v-if="isOpen" ref="floatingRef" :style="style" class="left-0 right-0">
       <div