diff --git a/packages/@vulcanjs/next-mui/components/NextMuiButton.tsx b/packages/@vulcanjs/next-mui/components/NextMuiButton.tsx
index cc100de8..3625ea10 100644
--- a/packages/@vulcanjs/next-mui/components/NextMuiButton.tsx
+++ b/packages/@vulcanjs/next-mui/components/NextMuiButton.tsx
@@ -28,23 +28,25 @@ export const NextMuiButton = ({
const linkProps = pick(props, nextLinkProps);
const buttonProps = omit(props, nextLinkProps);
return (
-
+
+
+
);
};
/**
* Button to be used when using href and pointing toward a local page
+ *
+ * Do not pass href directly to Button or ListItemButton, this leads to bad UX
+ * Use a Next link for better consistency (will use an SPA link)
*/
-export const NextMuiListItemButton = ({
- children,
- ...props
-}: ListItemButtonProps & NextLinkProps) => {
+export const NextMuiListItemButton = (
+ props: ListItemButtonProps & NextLinkProps
+) => {
const linkProps = pick(props, nextLinkProps);
const buttonProps = omit(props, nextLinkProps);
return (
-
- {children}
-
+
+
+
);
};
diff --git a/packages/@vulcanjs/next-mui/index.ts b/packages/@vulcanjs/next-mui/index.ts
index 4962150a..c2a28e7c 100644
--- a/packages/@vulcanjs/next-mui/index.ts
+++ b/packages/@vulcanjs/next-mui/index.ts
@@ -2,7 +2,8 @@ export * from "./emotion/createEmotionCache";
export { default as Link } from "./components/Link"; // deprecated alias
export { default as NextMuiLink } from "./components/Link"; // recommanded alias to use
+
export {
NextMuiButton,
NextMuiListItemButton,
-} from "./components/NextMuiButton"; // other components accepting links
+} from "./components/NextMuiButton";
diff --git a/src/components/vn/learn/Steps.tsx b/src/components/vn/learn/Steps.tsx
index 3989f82e..a3a3e01b 100644
--- a/src/components/vn/learn/Steps.tsx
+++ b/src/components/vn/learn/Steps.tsx
@@ -85,7 +85,6 @@ export const Steps = () => {
{steps.map((step, stepIdx) => {
return (
- {/** Since steps are pointing to a local page, we need a Next link */}
maxStep}
diff --git a/src/pages/learn/intro-offline.mdx b/src/pages/learn/intro-offline.mdx
index 650d8cc4..3083c29b 100644
--- a/src/pages/learn/intro-offline.mdx
+++ b/src/pages/learn/intro-offline.mdx
@@ -1,4 +1,4 @@
-import { Button } from "@mui/material";
+import { NextMuiButton } from "@vulcanjs/next-mui";
import { LearnLayout } from "~/components/vn/learn/LearnLayout";
# Step 1: Opening Vulcan locally
@@ -12,9 +12,9 @@ This is all you have to do for this step. Next step is going to be about the dat
## Go to step 2
-
+
export default function IntroOfflinePage(props) {
return ;
diff --git a/src/pages/learn/models-and-graphql.mdx b/src/pages/learn/models-and-graphql.mdx
index 348e03e6..e81798d2 100644
--- a/src/pages/learn/models-and-graphql.mdx
+++ b/src/pages/learn/models-and-graphql.mdx
@@ -1,3 +1,4 @@
+import { NextMuiButton } from "@vulcanjs/next-mui";
import { Button } from "@mui/material";
import { LearnLayout } from "~/components/vn/learn/LearnLayout";
import { StepIfElse } from "~/components/vn/learn/Steps";
@@ -69,15 +70,18 @@ If this button is still disabled:
- check if you Mongo server is running correctly
- restart Vulcan Next (ctrl+C in your terminal, and `yarn run dev` again)
- Click to go to next step}
- ifNotOk={
-
- }
- >
+ Click to go to next step}
+ ifNotOk={
+
+
+ }
+
+ >
export default function MongoPage(props) {
return ;
diff --git a/src/pages/learn/mongo.mdx b/src/pages/learn/mongo.mdx
index 7c4b07a3..b3961d7b 100644
--- a/src/pages/learn/mongo.mdx
+++ b/src/pages/learn/mongo.mdx
@@ -1,3 +1,4 @@
+import { NextMuiButton } from "@vulcanjs/next-mui";
import { Button } from "@mui/material";
import { LearnLayout } from "~/components/vn/learn/LearnLayout";
import { StepIfElse } from "~/components/vn/learn/Steps";
@@ -72,9 +73,9 @@ If this button is still disabled:
+
Click to go to next step
-
+
}
ifNotOk={