Pular para o conteúdo
Ajude a traduzir esta página

Alert

Um alerta exibe uma mensagem curta e importante de uma forma que atrai a atenção do usuário sem interromper o que ele estiver fazendo.

Observação: Este componente não está documentado nos guias do Material Design, mas o Material-UI o suporta.

Alerta simples

Este alerta oferece quatro níveis de severidade que definem diferentes ícones e cores.

<Alert severity="error">This is an error alert — check it out!</Alert>
<Alert severity="warning">This is a warning alert — check it out!</Alert>
<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Descrição

Você pode usar o componente AlertTitle para exibir um título formatado acima do conteúdo.

<Alert severity="error">
  <AlertTitle>Error</AlertTitle>
  This is an error alert — <strong>check it out!</strong>
</Alert>
<Alert severity="warning">
  <AlertTitle>Warning</AlertTitle>
  This is a warning alert — <strong>check it out!</strong>
</Alert>
<Alert severity="info">
  <AlertTitle>Info</AlertTitle>
  This is an info alert — <strong>check it out!</strong>
</Alert>
<Alert severity="success">
  <AlertTitle>Success</AlertTitle>
  This is a success alert — <strong>check it out!</strong>
</Alert>

Ações

Um alerta pode conter uma ação, como um botão de fechar ou desfazer. É renderizado depois da mensagem na parte final do alerta.

Se um onClose callback é dado e um atributo action é passado, um ícone de fechar é exibido. O atributo action pode ser usado para fornecer uma ação alternativa, por exemplo usando um Button ou IconButton.

<Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
<Alert
  action={
    <Button color="inherit" size="small">
      UNDO
    </Button>
  }
>
  This is a success alert — check it out!
</Alert>

Transição

Você pode utilizar um transition component como Collapse para realizar uma transição na aparência do alerta.

Ícones

O atributo icon permite que você adicione um ícone no início do componente de alerta. Isto substituirá o ícone padrão de acordo com a gravidade especificada.

Você pode alterar a gravidade padrão para mapeamento de ícones com o atributo iconMapping. Isto pode ser definido globalmente utilizando theme customization.

Definir o atributo ícone como falso removerá o ícone completamente.

<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
  This is a success alert — check it out!
</Alert>
<Alert iconMapping={{ success: <CheckCircleOutlineIcon fontSize="inherit" /> }}>
  This is a success alert — check it out!
</Alert>
<Alert icon={false} severity="success">
  This is a success alert — check it out!
</Alert>

Variantes

Duas variantes adicionais estão disponíveis – delineadas e preenchidas:

Outlined

<Alert variant="outlined" severity="error">
  This is an error alert — check it out!
</Alert>
<Alert variant="outlined" severity="warning">
  This is a warning alert — check it out!
</Alert>
<Alert variant="outlined" severity="info">
  This is an info alert — check it out!
</Alert>
<Alert variant="outlined" severity="success">
  This is a success alert — check it out!
</Alert>

Preenchido

<Alert variant="filled" severity="error">
  This is an error alert — check it out!
</Alert>
<Alert variant="filled" severity="warning">
  This is a warning alert — check it out!
</Alert>
<Alert variant="filled" severity="info">
  This is an info alert — check it out!
</Alert>
<Alert variant="filled" severity="success">
  This is a success alert — check it out!
</Alert>

Aviso na tela

Você pode usar o componente SnackBar para exibir um aviso na tela com o componente Alert.

Cor

A propriedade color substituirá a cor padrão para a gravidade especificada.

<Alert severity="success" color="info">
  This is a success alert — check it out!
</Alert>

Acessibilidade

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert)

Quando o componente é exibido de forma dinâmica, o conteúdo é automaticamente anunciado pela maioria dos leitores de tela. No momento, os leitores de tela não informam aos usuários sobre alertas que estão presentes quando a página carrega.

O uso de cores para adicionar significado apenas fornece uma indicação visual, que não vai ser transmitida para usuários de tecnologias assistivas, como leitores de tela. Certifique-se de que a informação indicada pela cor seja clara a partir do próprio próprio conteúdo (por exemplo, o texto visível), ou esteja incluída através de meios alternativos, como um texto oculto adicional.

As ações devem ter um índice de tabulação igual a 0 para que possam ser alcançadas por usuários que usam apenas o teclado.

API