AsyncIconButton

An icon button that is automatically disabled after being clicked, until the async action is complete.

Props

The same as Joy UI's IconButton component, except for the following:

onClick can be an async function.

Examples

Icon Button that loads for a few seconds

1<AsyncIconButton
2  variant="outlined"
3  onClick={async () => {
4    await wait(5_000);
5    alert("You waited 5 seconds!");
6  }}
7>
8  <Icon icon="alarm" />
9</AsyncIconButton>

1<AsyncIconButton
2  variant="outlined"
3  onClick={async () => {
4    await wait(5_000);
5    alert("You waited 5 seconds!");
6  }}
7>
8  <Icon icon="alarm" />
9</AsyncIconButton>

.css-1gf1up0{--Icon-fontSize:calc(1em * 1);margin:var(--Typography-margin, 0px);display:inline;font-size:var(--Typography-fontSize, inherit);display:inline;}.css-1gf1up0>.MuiTypography-endDecorator{display:none;}.css-1gf1up0:hover>.MuiTypography-endDecorator{display:inline;}AsyncIconButton

Examples

Icon Button that loads for a few seconds

See also

AsyncIconButton