diff --git a/docs/src/components/home/GetStartedButtons.tsx b/docs/src/components/home/GetStartedButtons.tsx
index b52f6c90e85487..fe695d7fb16100 100644
--- a/docs/src/components/home/GetStartedButtons.tsx
+++ b/docs/src/components/home/GetStartedButtons.tsx
@@ -5,27 +5,25 @@ import Button from '@mui/material/Button';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
import CheckRounded from '@mui/icons-material/CheckRounded';
-import ROUTES from 'docs/src/route';
import Link from 'docs/src/modules/components/Link';
interface GetStartedButtonsProps extends BoxProps {
+ callToAction?: string;
installation?: string;
- to?: string;
+ to: string;
}
export default function GetStartedButtons(props: GetStartedButtonsProps) {
const [copied, setCopied] = React.useState(false);
- const {
- installation = 'npm install @mui/material @emotion/react @emotion/styled',
- to = ROUTES.documentation,
- ...other
- } = props;
+ const { installation, callToAction = 'Get started', to, ...other } = props;
+
const handleCopy = () => {
setCopied(true);
- copy(installation).then(() => {
+ copy(installation as any).then(() => {
setTimeout(() => setCopied(false), 2000);
});
};
+
return (
- Get started
-
- : }
- onClick={handleCopy}
- sx={{
- maxWidth: '324px',
- display: 'inline-block',
- justifyContent: 'start',
- overflowX: 'hidden',
- whiteSpace: 'nowrap',
- textOverflow: 'ellipsis',
- position: 'relative',
- pr: 5,
- }}
- >
- {installation}
+ {callToAction}
+ {installation ? (
+ : }
+ onClick={handleCopy}
+ sx={{
+ maxWidth: '324px',
+ display: 'inline-block',
+ justifyContent: 'start',
+ overflowX: 'hidden',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ position: 'relative',
+ pr: 5,
+ }}
+ >
+ {installation}
+
+ ) : null}
);
}
diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx
index 58380c598e5c6b..8352839b1f0ec4 100644
--- a/docs/src/components/home/Hero.tsx
+++ b/docs/src/components/home/Hero.tsx
@@ -123,7 +123,7 @@ export default function Hero() {
with Material UI, our fully-loaded component library, or bring your own design system to
our production-ready components.
-
+
}
rightSx={{
diff --git a/docs/src/components/home/StartToday.tsx b/docs/src/components/home/StartToday.tsx
index f48587ebf0ddef..2b4d8b66a4ef1a 100644
--- a/docs/src/components/home/StartToday.tsx
+++ b/docs/src/components/home/StartToday.tsx
@@ -22,7 +22,7 @@ export default function StartToday() {
}
description="Find out why MUI's tools are trusted by thousands of open-source developers and teams around the world."
/>
-
+
diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx
index 607cce2fb0d7b2..3f8e807c5b3878 100644
--- a/docs/src/components/productMaterial/MaterialHero.tsx
+++ b/docs/src/components/productMaterial/MaterialHero.tsx
@@ -244,7 +244,10 @@ export default function MaterialHero() {
Material UI is beautiful by design and features a suite of customization options that
make it easy to implement your own custom design system.
-
+
}
rightSx={{