diff --git a/.changeset/many-beans-write.md b/.changeset/many-beans-write.md
new file mode 100644
index 0000000000..4aad579daf
--- /dev/null
+++ b/.changeset/many-beans-write.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Added a `variant` prop to the `WelcomeTitle` component making it work with the Customizable Home page feature. Adding it like this `` to the list of items under `CustomHomepageGrid` will allow it to render with a size that works well.
diff --git a/packages/app/src/components/home/CustomizableHomePage.tsx b/packages/app/src/components/home/CustomizableHomePage.tsx
index 8998538e54..b592490f2e 100644
--- a/packages/app/src/components/home/CustomizableHomePage.tsx
+++ b/packages/app/src/components/home/CustomizableHomePage.tsx
@@ -28,6 +28,7 @@ import { HomePageSearchBar } from '@backstage/plugin-search';
import Grid from '@material-ui/core/Grid';
import { tools, useLogoStyles } from './shared';
+import { WelcomeTitle } from '@backstage/plugin-home';
const defaultConfig = [
{
@@ -81,6 +82,7 @@ export const CustomizableHomePage = () => {
+
diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
index 686d13a748..fddd621b92 100644
--- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
+++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
@@ -23,13 +23,18 @@ import Typography from '@material-ui/core/Typography';
import { useEffect, useMemo } from 'react';
import useAsync from 'react-use/esm/useAsync';
import { getTimeBasedGreeting } from './timeUtil';
+import { Variant } from '@material-ui/core/styles/createTypography';
/** @public */
export type WelcomeTitleLanguageProps = {
language?: string[];
+ variant?: Variant | 'inherit';
};
-export const WelcomeTitle = ({ language }: WelcomeTitleLanguageProps) => {
+export const WelcomeTitle = ({
+ language,
+ variant,
+}: WelcomeTitleLanguageProps) => {
const identityApi = useApi(identityApiRef);
const alertApi = useApi(alertApiRef);
const greeting = useMemo(() => getTimeBasedGreeting(language), [language]);
@@ -49,7 +54,7 @@ export const WelcomeTitle = ({ language }: WelcomeTitleLanguageProps) => {
return (
- {`${greeting.greeting}${
+ {`${greeting.greeting}${
profile?.displayName ? `, ${profile?.displayName}` : ''
}!`}