Show Alpha label at more places

[prakhargupta1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

MUI Toolpad also appears at the Footer of mui.com. A user can reach mui.com/toolpad from there and won't get to know that it is in alpha phase of development.

I suggest we put the label (the one we show on Products menu) at all such occurrences.

[gerdadesign]

Footer

Logo

I adjusted the logo variants in Figma, so that the badge is an option you can turn on. Here's a screenshot of what that looks like in context of both light and dark modes:

Docs

Should we also mimic the structure of Material UI and X in the docs with a version dropdown? Or does that not make sense for this product yet?

[prakhargupta1]

Should we also mimic the structure of Material UI and X in the docs with a version dropdown? Or does that not make sense for this product yet?

Yes, makes sense to show alpha here as well.

We should also add label in the Toolpad app.

[gerdadesign]

Clarifying after our discussion @prakhargupta1:

• we are not adding alpha to the docs dropdown since this is the current and only version at the moment
• and the label in the toolpad app (in figma) is the same component as the one on the landing page. screenshot is updated in #1254

[bharatkashyap]

Most large viewports don't have enough space to fit the label in the footer products list:

https://user-images.githubusercontent.com/19550456/202429003-64f458ab-5bcb-4db6-9844-737ccd839bcd.mov

A potential solution is to increase the width of the links section in the footer to make space for the label. Even that creates a situation where the Toolpad list item gets wrapped:

https://user-images.githubusercontent.com/19550456/202433645-06ee6602-ee05-4ca0-88b0-0bc8bab94a13.mov

Do you have a solution in mind?