“The Data Grid is a data grid that is implemented by adding
<DataGrid />to your app.” 🙃
When writing about MUI products, there are three different styles that you might employ:
[<ComponentCase />](<https://mui-org.notion.site/Style-conventions-for-MUI-components-and-products-dff7d2d7d1ba4a4abd47f48cf345b800>)This document explains the proper usage of each.
Most references to MUI’s products and components should take Title Case. They are proper nouns. This is a simple way to differentiate (for example) the Material UI Button from the general concept of a button.
When a component name contains more than one word, treat it like a standard English proper noun (✅ Button Group) rather than code (❌ ButtonGroup).
In situations when you would opt for sentence case (headlines), Title Case takes precedence.
✅ The Button Group component provides a wrapper for grouping related Buttons.
💡 Button Group and Button are both Material UI components and should be treated as proper nouns.
❌ The ButtonGroup component provides a wrapper for grouping related buttons.
💡 Button Group needs a space; Buttons should be capitalized, because we’re not referring to the concept of a button, nor the HTML <button> element—this can only be a Material UI Button.
✅ MUI X Date and Time Pickers
❌ MUI X Date and time pickers
💡 We’re not referring to the general concept of date and time pickers, but specifically to those components that belong to MUI X.
Only use sentence case when referring to the general concept of a component, as opposed to MUI’s component specifically. This should not be common in our documentation, as we are most often discussing our components and their implementation.