diff --git a/apps/docs/components/Home/index.tsx b/apps/docs/components/Home/index.tsx
index 861ffe8410..2d08aee26d 100644
--- a/apps/docs/components/Home/index.tsx
+++ b/apps/docs/components/Home/index.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import styles from "./styles.module.css";
 import getClassNameFactory from "@/core/lib/get-class-name-factory";
 import { Button } from "@/core/components/Button";
+import Link from "next/link";
 
 const getClassName = getClassNameFactory("Home", styles);
 
@@ -26,7 +27,9 @@ export const Home = () => {
       <div style={{ paddingTop: 32 }} />
       <div className={getClassName("ctas")}>
         <div className={getClassName("actions")}>
-          <Button href="/docs">Read docs</Button>
+          <Link href="/docs" style={{ display: "flex" }}>
+            <Button>Read docs</Button>
+          </Link>
           <Button href="https://demo.puckeditor.com/edit" variant="secondary">
             View demo
           </Button>
diff --git a/packages/core/components/Button/Button.tsx b/packages/core/components/Button/Button.tsx
index 090150a03b..8ae9cb94fd 100644
--- a/packages/core/components/Button/Button.tsx
+++ b/packages/core/components/Button/Button.tsx
@@ -36,7 +36,7 @@ export const Button = ({
 
   useEffect(() => setLoading(loadingProp), [loadingProp]);
 
-  const ElementType = href ? "a" : "button";
+  const ElementType = href ? "a" : onClick ? "button" : "div";
 
   const el = (
     <ElementType