Alerta
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.
Nota: Este componente não está documentado nas diretrizes do Material Design, mas MUI o suporta.
Alertas básicos
O alerta oferece quatro níveis de severidade que se distinguem em 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><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. A ação é renderizada depois da mensagem, na parte final do alerta.
Se um callback onClose é fornecido e a propriedade action não é definida, um ícone de fechar será exibido. A propriedade action pode ser usada 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 componente de transição como um Collapse para realizar uma transição na exibição do alerta.
Ícones
A propriedade icon permite que você adicione um ícone no início do componente de alerta. Isto substituirá o ícone padrão de acordo com a severidade especificada.
Você pode alterar a severidade padrão e o mapeamento do ícone com a propriedade iconMapping. Isso pode ser definido globalmente utilizando a customização do tema.
Definir a propriedade icon 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><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><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>Toast
Você pode usar o componente Snackbar para exibir um toast com o componente Alert.
Cor
A propriedade color irá sobrescrever a cor padrão para a severidade 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 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 de 0 para que possam ser acessíveis por usuários que usam apenas o teclado.