Supported MUI Components & How-to Make Edits

Just like customizing the design kit’s look and feel, there are specific things you can and cannot edit in the MUI kit. Below is the full list & instructions for each component we support.
Button 
How To Use: 
Copy & Paste any of the Default buttons into your custom components. When it comes into Quest they will be working, interactive Material UI components.
Can Change:
​
​
Auto layout padding (Adjust button size) 
You can remove, edit or add drop-shadow to each button 
You can change icons by swapping icon instance 
You can adjust corner radius 
Even though there are different size buttons, you can also adjust the size to be larger or smaller with fixed width and height when you use the instance in your custom components
Can NOT Change:
​


Don’t change the button components’ constraints (Hug contents). You can ONLY change this on the instance you copy & pasted. 
Don’t change individual button colors. Change the design system colors to make those changes. 
Don’t change individual button fonts. Change the design system’s typography instead. 
Don’t change the button's text label here. Change it on the pasted instance in your custom component.

Don’t add additional icons or elements aside from the text and icons that are there now. Material UI will not honor them. You can add more icons in the icons and swap the instance only (as shown above) but don’t directly add images or vector icons into the button.
​
​
Icon 
How To Use: 
Copy & Paste the size you need into your custom components. Then in the custom component, you can choose the actual icon variant & color. To change the icon, swap the instance for another one. You can add as many icons as you want to the MUI design system / kit but just be sure to sync the library whenever you add a new one to be able to swap for it in your custom component design later.
​
Can Change: 
Nothing. Simply copy & paste these.
Can NOT Change: 
Don’t touch constraints 
Don’t touch colors 
Don’t touch size  (You can resize once in your custom component)
Link
How to Use:
Copy & Paste these into your custom components anywhere you wish to use a URL link on text.
Can Change: 
Typography via Text Styles 
Color via the Color Styles
Can NOT Change: 
Anything else
Autocomplete
How to Use:
Copy & Paste the version of the autocomplete you prefer into your custom components.
Can Change: 
Typography via Text Styles 
Color via the Color Styles
Can NOT Change: 
Don’t change the colors to custom colors in different cases. Can only change the colors via from the Color Styles. 
Don’t change the fonts to be custom. Must use the same Text Styles across all variants.
Text Field
How to Use:
Copy & Paste the “Enabled” version of the text field you prefer into your custom components.
Can Change: 
Typography via Text Styles 
Color via the Color Styles
Can NOT Change: 
Don’t change the colors to custom colors in different cases. Can only change the colors via from the Color Styles. 
Don’t change the fonts to be custom. Must use the same Text Styles across all variants.
Alert
How to Use:
Copy & Paste these into your custom components anywhere you wish to use an Alert. Currently we only support the “Alert/Filled” version.
Can Change: 
Border radius 
Color via the Color Styles 
Drop shadow 
Customize & change icons to any other by swapping their instance
Can NOT Change: 
Auto-layout padding. Left & Right padding comes from Material UI. 
Don’t remove the icon at the beginning of the alert, it is required by MUI to have one.
Avatar
How to Use:
Copy & Paste into your custom components where you want to have an avatar. Currently, Quest does not support Avatar Group.
We only currently support Image & Initials. Badge & Icon are coming soon.
Can Change: 
Colors via the Color Styles
Images 
Font Font size 
Size
Can NOT Change: 
Can’t use shapes other than circle, square or rounded square 
Can’t add or change layer order
Checkbox
How to Use:
Copy & Paste into your custom components where you want to have a checkbox. Copy and paste the default checked or un-checked, non-hovered states only.
​
​
Changing the styling for the hover states and colors of the checkboxes should be done so on the "Checked=True" row and not the first row in the design. This serve as the main style and will apply the hover colors to the default state.
Can Change: 
Typography via Text Styles 
Color via the Color Styles 
Icon via variant 
Hover corner radius 
Sizes
Can NOT Change: 
Can’t copy and paste the hover states, only use default non-hover states 
Can’t add or change layer order
Radio Buttons
How to Use:
Copy & Paste into your custom components where you want to have a checkbox. Copy and paste the default toggled or non-toggled, non-hovered states only.
​
​
Changing the styling for the hover states and colors of the checkboxes should be done so on the "Checked=True" row and not the first row in the design. This serve as the main style and will apply the hover colors to the default state.
When copying and pasting Radio Button components into your custom design, be sure to add them all into a frame. Once you import this into Quest, you will add the Radio Group feature to set them up.
Can Change: 
Typography via Text Styles 
Color via the Color Styles 
Icon via variant 
Hover corner radius 
Sizes
Can NOT Change: 
Can’t copy and paste the hover states, only use default non-hover states 
Can’t add or change layer order
Switch
How to Use:
Copy & Paste into your custom components where you want to have a switch. Copy and paste the default non-hovered states only.
Can Change: 
Typography via Text Styles 
Color via the Color Styles 
Hover corner radius 
Sizes
Can NOT Change: 
Can’t copy and paste the hover states, only use default non-hover states 
Can’t add or change layer order
Dialog
How to Use:
Unlike most other MUI components, you do not copy & paste Dialog into your custom designs. Instead, this is a feature you can choose inside of Quest. You can choose to include different things inside a dialogue which will be a full screen pop-over that darkens the area behind it. Inside the design system, you are simply styling how that will look when used.
Can Change: 
Auto layout padding 
Border radius 
Color 
Drop shadow
Can NOT Change: 
Anything else
Tooltip
How to Use:
Similar to Dialog, you do not copy and paste this component into your custom designs but rather choose it as a feature inside of Quest. You can choose which component in Quest will have this applied, where the anchor point is, and what goes inside of it. Inside the design system, you are simply styling how that will look when used.
Can Change: 
Typography via Text Styles 
Color via the Color Styles 
Corner radius 
Size 
Adjust or remove drop-shadow
Can NOT Change: 
Don’t use a gradient, only solid color
Data Grid
How to Use:
Copy & Paste into a new custom component with nothing else in it. Then copy and paste that custom component into your custom designs where you want to use it as a placeholder.
For full instructions, please refer to this page in the docs:
Using the MUI Data Grid & Table​
Can Change: 
Color via the Color Styles 
Typography via Text Styles 
Size
Add rows or columns (but final layout is controlled by the code)
Can NOT Change: 
Can’t add non-standard shapes, images or design elements abstract to a traditional table like design structure.
Table
How to Use:
Copy & Paste into a new custom component with nothing else in it. Then copy and paste that custom component into your custom designs where you want to use it as a placeholder.
For full instructions, please refer to this page in the docs:
Using the MUI Data Grid & Table​
Can Change: 
Color via the Color Styles 
Typography via Text Styles 
Size
Add rows or columns (but final layout is controlled by the code)
Can NOT Change: 
Can’t add non-standard shapes, images or design elements abstract to a traditional table like design structure.
Typography
In the Figma MUI kit, there's a page for the Typography component. This is simply meant to be a place to see what your typography styles look like. You should NOT copy and paste these components into your own custom designs/components.
Please refer to the Customizing & Using the Design Kit doc for styling your typography and using it.
Don't see a component you need?
We're constantly adding new components to the list. If can't find one you need, we want to know. Reach out to us on our Discord channel or contact us at [email protected] and tell us so we can prioritize.
​