Setting up Bindings and Features on the MUI Button

How to set up Bindings and Features on the MUI Button component in Quest

Note: You’ll see a reference to the “use hook” file in this documentation. When you export your component in Quest, say “MyCatalog”, we generate two files. One is the presentation layer which is named “MyCatalog.tsx” and the other one is the “use hook” file named “useMyCatalog.ts”. It’s the “use hook” file where the developers will add all applicable logic


Text Binding:

There are four ways to set the Text value of a button:

  1. Prop value: Assign a prop value that can be passed down from the parent component:

    • Step 2: Set the “productinfo” prop at the component level. This will allow the parent component to pass the “productinfo” object to the nested components

Visible Binding:

Similar to the Text binding, you can set the Visible binding using one of the methods below:

  1. Boolean (pass true or false)

  2. Data binding such as data.isVisible and set this in the use hook file

  3. Function calls such as fns.isButtonVisible() and add logic to the isButtonVisible function in the “use hook” file.

Color binding:

Future implementation

  1. While the Color binding on the button is exposed, the setting is reserved for future implementation in Quest. Use the desired Button Variant from MUI

Disabled binding:

There are four different ways to set this binding, very similar to Text and Visible bindings

  1. Boolean (pass true or false)

  2. Set the binding to “data.isDisabled” and set this in the “use hook”

  3. Function call such as fns.isButtonDisabled() and modify the logic in the “use hook” file

Loading binding:

There are four different ways to set this binding, very similar to the Text and Visible bindings.

  1. Boolean (pass true or false)

Loading Position binding:

This controls the position of the loading indicator, the little spin wheel. You can refer to the MUI Loading Position API docs for acceptable valuesThere are four ways to set this

  1. Pass a literal value in the binding such as “start”, “end”, or “center”

  2. You can set the prop value such as “props.loadingPosition” and pass it form the parent component

  3. Set the binding to a function call such as fns.getLoadingPosition() and add logic to that function in the “use hook” file to return the desired position “start”, “end” or “center”. The “start” value will position the spinning wheel towards the left end of the button

aria-label binding:

There is only one way to set this binding. Set it to a literal string with quotes such as “large-submit-buttton” or something meaningful/relevant that can be interpreted and read out loud for the user by the screen readers or such assistive technology.

onClick binding:

Set this binding to a call a method such as fns.handleSubmit and add logic to this method in the “use hook”



There are two ways to set the tooltip feature. Either as literal text or use another component

  1. Text: Set the fields such as Text, Placement such “top”, “bottom”, “bottom-start”, etc (See tooltip MUI API documentation for more information), Show Arrow, Max Width

  2. Component: Instead of a literal text for tooltip, you can also use another custom component to render as a tooltip and set the below attributes to control the behavior of the tooltip:

    1. Component: name of the component such as CustomTooltip

    2. Component Props: Props to pass to the component that can be leveraged within the custom tooltip component to display the tooltip text, etc. Example: tooltip={“Component Tooltip”}


The list feature can be used to create a repeating set of buttons iterating over an array or any other collection of items. To leverage the List feature, you’d actually apply the list on the Frame that’s encompassing the button. Technically, the List feature is not something you’d set directly on the Button but rather on the frame encompassing the button. Please refer to this detailed guide on how to creating a repeating list of buttons to leverage the List feature


The dialog feature can be used to invoke a modal dialog box when the user clicks a button. This feature is not directly set on the Button but rather on another component that’ll function as a dialog box and the rendering of the dialog box can be controlled from the Button on-click binding function call. Please refer to this detailed doc on how to display a dialog box upon button on-click

File Upload:

  1. Multiple: Set this to a boolean (true or false) or derive the value from either a prop or a data attribute. This will allow you to control the ability to upload one or multiple files

  2. On Change: Set this to the method where you can write your logic for handling the files that the user has selected for upload. You can modify the logic for this method in the “use hook” file

Radio Group:

This feature is not applicable for the Button component.


  1. Please refer to the MUI Badge API documentation for more information on how to properly set the Badge properties

  2. Color defaults to ‘primary’ and Variant defaults to ‘standard’ but you can override

  3. Be mindful of the “Invisible”. It’s counterintuitive. Typically MUI API should’ve defined that property as “visible” and we’d expose it as such. But since they have it as “Invisible”, we extend the same so you’d have to set this to “false” to show the badge or “true” to hide the badge.


You can take any custom component and use it as a popover feature over another component. For example, let’s say you have a feedback button or a buy button and you want to invoke a helpful popover as next action or just as informational text, you can associate the popover custom component to your feedback or buy button. Here is how it’s done and there is more explanation in our docs. You’ll need two things to try this out. Have a custom component that’ll function as a popover. Have a button or something else where you can anchor this popover to display on some user action such as hover or submit. The below settings should be done on the Popover component:

  1. Anchor EL: Set this to props.AnchorEl or something similar and pass the component name in the prop values that’ll render this Popover based on the user action

  2. Anchor Origin: Refer to MUI API Docs for popover

  3. Transform Origin: Refer to MUI API Docs for popover

  4. Open: Pass in a boolean value either derived from the prop or from data. For example define it as data.openPopover and then control the value of the openPopover in the “use hook” file like below

import { useState } from "react"; 

const useMuiButtonPropsAndBindings = () => {
 let data: any = {};
 const [openPopover, setPopover] = useState(false);
 data.openPopover = openPopover;
 const isButtonDisabled = (): any => {};
 const isLoading = (): any => {};
 const handleSubmit = (): any => {
 const handleClosePopover = (): any => {
  1. On the button that’ll invoke this popover, add the handling logic to set the popover value to true either on-click or on hover action by the user

  2. On Close: Add a function to set the data.openPopover to false

Last updated