Finding the right React component in the MUI design system

MUI, the popular React Material Design library, has a lot of components. And that’s great! (As long as your tree shaking is working correctly.)

But it can also make it hard to find the component you want. Sometimes words are used differently across design systems. (Quick! What’s the difference between a modal and a dialog?) And sometimes you might just not be aware that MUI already has something built in so you don’t have to build it yourself.

To help with finding the right component in MUI, here’s a quick reference of the components that I most frequently confused for one another or have trouble remembering which is which. Live code examples are included so you can play with them and see how they’re implemented.

Badges and Chips in MUI

Both “badges” and “chips” sound like they refer to small discrete things. In MUI:

• A Badge is a colored circle or oval that appears over top the corner of element and usually displays a number; think of an iPhone red notification unread badge.
• A Chip is a bit of content with an oval around it. It can have an X icon button to dismiss it.

Tooltips, Popovers, and Poppers

“Tooltips,” “popovers,” and “poppers” all sound like small things that pop up. In MUI:

• A Tooltip automatically appears when you hover the mouse over an item and is just for displaying a little bit of text. It has a default style which can be overridden.
• A Popover displays content in a box with an elevation and automatically dismisses when you click away from it.
• A Popper displays content with no default styling, and it does not automatically dismiss when you click away from it. (Talk about confusing names; I literally typed Popover twice while writing this part of the post.)

Alerts, Dialogs, Modals, and Snackbars

“Alerts,” “dialogs,” and “modals” all sound like they might represent dismissible windows. “Snackbars” is familiar if you’ve worked on Android or with Material Design. In MUI:

• An Alert is a colored bar rendered in the flow of a page that displays a success, warning, or error message.
• A Modal is a low-level component for presenting content overlayed on your existing content, but you have to style it yourself. It handles dismissing when you click outside it.
• A Dialog is a higher-level component that provides pre-styled pieces for displaying a title, content, and a bar of actions along the bottom of an overlayed window. It handles dismissing when you click outside it.
• A Snackbar displays a message along one edge of the browser window. It can be configured to be dismissed manually, or automatically after a period of time.

Menus, Selects, and Autocompletes

“Menus” and “selects” both sound like ways you can select things from a menu. “Autocomplete” sounds like it’s completing as you type, and doesn’t necessarily suggest it has a menu. But in MUI, they all have menus:

• A Menu is not related to a form; it’s just a menu of clickable items, like in the menu bar of desktop operating systems. A Menu can be presented from any element; this example shows it presented from a Button.
• A Select is a form field that lets you choose an option from a dismissable list. It is custom-rendered by MUI to match Material Design.
• A NativeSelect is like a Select, but it uses a browser <select> tag under the hood. This can allow the behavior to work better on mobile, and also may be better for accessibility.
• An Autocomplete has a list of options, and allows you to type to choose from the list. There are a few different ways to use it:  
   
  • A default Autocomplete only lets you choose one option from a predetermined list. So it’s like a Select that allows typing to choose.
   
  • An Autocomplete with the freeSolo prop allows typing and submitting arbitrary text in addition to the options listed. So it’s more like a text field that suggests options as you type.
   
  • An Autocomplete with the multiple prop allows you to choose multiple options, which will be displayed as Chips with an X icon button to delete them. This approach is commonly referred to as “tags”.
   

More MUI components

These of course only scratch the surface of the components MUI provides.

It’s worth a skim through the list of MUI components at the start of a project and periodically to refresh yourself on what they have available. It takes some mental effort to keep track of all those components, but I’d prefer that work to having to implement them from scratch myself! Happy MUI-ing!