Components - application building blocks
Last updated
Was this helpful?
Last updated
Was this helpful?
On the Components page, you will find a set of all components available within Material UI. To help you find them easier, we divided them into 6 sections, based on the way they are divided within the left navigation bar from .
Although all components are placed on the same page, the way to work with them may vary slightly. This is due to the division according to which among components we can distinguish simple complex and group components. Below we describe the most comfortable way you work with each of these variants.
This category includes components for which it is possible to present all their variants within a single section. Their additional feature is that they can form a wholeness in themselves, i.e. they can be used alone, without joining them into larger groups. An example of such components could be Avatar, Badge, Checkbox or Tooltip.
The usage of this component type is the simplest because the only thing you need to do is copy the component that interests you and modify its basic properties (text, icon, image).
Below you can see an example of using the Button component in this way. Let's assume that our goal is to create a filled large button of secondary type with a plus icon on the left and the text "Add to favorites". The next steps will look like this:
Copy the component you want to use. In our case it will be button/contained/large/icon-left/secondary/default.
With the Ctrl / Cmd key held down, double-click on the text and enter the new value "Add to favorites". Note that the button has automatically increased its size to fit new content.
Go to the icon element and using the instance functionality, change it to icons > content > add. After changing the component, the icon color will return to the default value. Therefore, it is worth setting it up to palette / secondary / contrastText again.
In this category, there are components with so many variants that it would be possible to present them all in one section, but it would be a major impediment to their further use (it is difficult to choose the right component from among 300 options). In this case, the components can also function independently without combining them into larger groups. As an example of such components could be TextField, Alert or Select.
In this case, the use of the component also begins with copying its specific variant. This time, however, within a cloned component, you can find additional nested components that have been hidden by default. Thanks to their discovery and modification, you can create various additional variants.
To better explain how it works, we will use the example of the TextField component. In addition to the default version, it may have an icon or an additional text at its beginning or end. For the purpose of the example, let’s assume you want to create a TextField with an icon on the left, the additional text at the end, and auxiliary text below. The steps will be as follows:
Copy the component you want to use. In our case it will be text-field/outlined/medium/primary/empty.
In the left navigation bar expand the maximally cloned component to view its constituent components. You will notice that TextField has 4 invisible components: helper-text, prefix, suffix, and label-wrapper.
Restore the visibility of the helper-text element so that you get an additional supporting text. Note that due to the auto-layout, the component automatically changed its height to include a new element in it.
Restore the visibility of the suffix element. You should see the additional text at the end of TextField.
The last step is to add an icon. To do this, first restore the visibility of the prefix element. When you do this, you'll notice that both prefix and suffix are set to the additional text by default. To replace the text with an icon, select the prefix component, and change the "adornment" to "icon" using the instance change function.
Group components are the components that cannot function independently and require joining them into larger groups. As an example of such components could be List, ButtonGroup, Table, Stepper or AppBar.
In the case of components that can appear only in groups, each section contains individual elements from which we can "compose" the component we need. In this case, it is up to us to decide what the final group will look like.
As an example of a group, a component could be AppBar. By going to its section, you can notice that there are only group components that you can use to build the final AppBar version. Suppose you want to create a simple navigation bar containing sequentially the menu icon, the title of the current page, and the icon for menu expansion. To create such a component you should:
Copy the necessary components: navigation-icon, title/normal, overflow-icon.
Compose the components into the final AppBar version.
Create a new master component that you will use in your layouts.
This chapter provides information about the assumptions made while creating the Material UI Kit. Its knowledge will be useful when you want to make modifications within your own project copy. However, if you intend to use the unchanged components, you will not need this chapter information.
As you can notice, despite the differences in component types, each section is arranged similarly and consists of:
Components from the master category are the basis on which we can create final versions of various components. They have no shadow and use a special color palette in which the color names are saved as Docs / *. Thanks to them we can create (and modify) components cascaded.
The example of the Button component best illustrates the idea of cascaded modification. In the beginning, we define Master Elements there, which include text, right icon, and left icon - each of this in 3 sizes. Then, we use these elements and create components of the Master category, adding a new division into a variant (contained, outlined, text) to the puzzle. Then, on the basis of Master components, we create the final versions of our buttons, adding color and condition to previous properties.
To better view the cascade, we can save this information in the table form:
Type
Size
Wariant
Color
State
Master Elements
✅
✅
❌
❌
❌
Master
✅
✅
✅
❌
❌
Button
✅
✅
✅
✅
✅
Let's assume now that you would like the font used in it to be equal to that specified in the theme as typography / button. Without the cascade provided by components from the Master category, you would have to edit 162 button components (81 with a small text and 81 with a large text). Thanks to the cascade approach, you only need to edit 2 components: master/button/elements/text/large and master/button/elements/text/small.
Let’s summarize
Sometimes we can have a situation that our main component occurs in many variants, but nevertheless we can have elements in it that are not dependent on the variants (they always look the same). As an example of such a component, we can use Snackbar. It appears in 3 variants: only text, text with actions on the right, text with actions underneath. Regardless of the variants we accept, the text properties do not change (the text always has the same font and color).
To get a cascade in similar situations we do not need to refer to Master’s components. Instead, we can use a different category of components which is called “Particles”.
Thus, in the case of the mentioned Snackbar, we create one component for the text (snackbar/particle/message) and use it in all variants of the final component. Thanks to that, we gain one point, from which we can modify the message styles in all Snackbars at once.
The last and most often the largest part of each section are components. We discussed the details of their use at the beginning of this page.
Contains the name of the components set (corresponding to the name on the ) and documentation references. You will often find 2 links there, the first of which will lead to the official Material Design documentation (you will find out when and how to use the component from there) and the second to the Material UI documentation (you will learn what different variants of the component are and what interactions it can handle). Sometimes you will only see a link to the Material UI page in the section. This is due to the fact that, in addition to the components defined within Material Design, Material UI also has a set of its own components created according to the same standards.
