Backdrop

O componente backdrop (pano de fundo) é usado para fornecer ênfase em um elemento específico ou partes dele.

O backdrop sinaliza para o usuário uma mudança de estado dentro do aplicativo e pode ser usado para criar progressos, diálogos e muito mais. Em seu formato mais simples, o componente backdrop irá adicionar uma camada escurecida sobre seu aplicativo.

Feedback
Tamanho do pacote
Figma
Adobe
Sketch

Exemplo

<Button onClick={handleToggle}>Show backdrop</Button>
<Backdrop
  sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
  open={open}
  onClick={handleClose}
>
  <CircularProgress color="inherit" />
</Backdrop>

<Button onClick={handleToggle}>Show backdrop</Button>
<Backdrop
  sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
  open={open}
  onClick={handleClose}
>
  <CircularProgress color="inherit" />
</Backdrop>

Press Enter to start editing

API

<Backdrop />