Search…
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.
Copy link
On this page
Button
Icon
Link
Autocomplete
Text Field
Alert
Avatar
Checkbox
Radio Buttons
Switch
Dialog
Tooltip
Data Grid
Table
Typography
Don't see a component you need?