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.
Copy & Paste any of the Default buttons into your custom components. When it comes into Quest they will be working, interactive Material UI components.
- 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
- 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.
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.
- Nothing. Simply copy & paste these.
- Don’t touch constraints
- Don’t touch colors
- Don’t touch size (You can resize once in your custom component)
Copy & Paste these into your custom components anywhere you wish to use a URL link on text.
- Typography via Text Styles
- Color via the Color Styles
- Anything else
Copy & Paste the version of the autocomplete you prefer into your custom components.
- Typography via Text Styles
- Color via the Color Styles
- 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.
Copy & Paste the “Enabled” version of the text field you prefer into your custom components.
- Typography via Text Styles
- Color via the Color Styles
- 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.
Copy & Paste these into your custom components anywhere you wish to use an Alert. Currently we only support the “Alert/Filled” version.
- Border radius
- Color via the Color Styles
- Drop shadow
- Customize & change icons to any other by swapping their instance
- 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.
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.
- Colors via the Color Styles
- Images
- Font Font size
- Size
- Can’t use shapes other than circle, square or rounded square
- Can’t add or change layer order
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.
- Typography via Text Styles
- Color via the Color Styles
- Icon via variant
- Hover corner radius
- Sizes
- Can’t copy and paste the hover states, only use default non-hover states
- Can’t add or change layer order
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.
- Typography via Text Styles
- Color via the Color Styles
- Icon via variant
- Hover corner radius
- Sizes
- Can’t copy and paste the hover states, only use default non-hover states
- Can’t add or change layer order
Copy & Paste into your custom components where you want to have a switch. Copy and paste the default non-hovered states only.
- Typography via Text Styles
- Color via the Color Styles
- Hover corner radius
- Sizes
- Can’t copy and paste the hover states, only use default non-hover states
- Can’t add or change layer order
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.
- Auto layout padding
- Border radius
- Color
- Drop shadow
- Anything else
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.
- Typography via Text Styles
- Color via the Color Styles
- Corner radius
- Size
- Adjust or remove drop-shadow
- Don’t use a gradient, only solid color
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.
- Color via the Color Styles
- Typography via Text Styles
- Size
- Add rows or columns (but final layout is controlled by the code)
- Can’t add non-standard shapes, images or design elements abstract to a traditional table like design structure.
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.
- Color via the Color Styles
- Typography via Text Styles
- Size
- Add rows or columns (but final layout is controlled by the code)
- Can’t add non-standard shapes, images or design elements abstract to a traditional table like design structure.
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.
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.
Last modified 4mo ago