[material-ui][docs] Add details on appropriate usage to component demo pages

[basilnoor]

Duplicates

• I have searched the existing issues

Related page

https://mui.com/material-ui/react-avatar/

Kind of issue

Missing information

Issue description

Hello

I was looking through the documentation for some components and noticed that some of the components are hard to tell when they would be useful. I'm looking to make a few changes to add additional information for such components.

For example the "Chip" component has a short description of what it is then is followed by why it is useful. I think including that why it's useful can benefit other components like "Avatar" which are missing it. This can help newer developers get an understanding of when to use the component.

Context 🔦

No response

[mj12albert]

This can help newer developers get an understanding of when to use the component.

For many Material UI components, this guidance is provided by the Material Design spec, e.g. for the Chip: https://m2.material.io/components/chips#types

Perhaps we could link to the relevant spec on the component pages where applicable 🤔 like here:

[samuelsycamore]

Thanks for the feedback @basilnoor ! I agree that the components should offer instructions for proper usage (like when to use an Alert, vs a Snackbar, vs a Dialog). This is something we've been doing more of in the Joy UI documentation, and we should take it into consideration when working on #35158.