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.

This is an error alert — check it out!

This is a warning alert — check it out!

This is an info alert — check it out!

This is a success alert — check it out!

<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">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>

Press Enter to start editing

Descrição

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

Error

This is an error alert — check it out!

Warning

This is a warning alert — check it out!

Info

This is an info alert — check it out!

Success

This is a success alert — check it out!

<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>

<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>

Press Enter to start editing

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.

This is a success alert — check it out!

<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>

<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>

Press Enter to start editing

Transição

You can use a transition component such as Collapse to transition the appearance of the alert.

Close me!

Í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. This can be defined globally using theme customization.

Definir a propriedade icon como falso removerá o ícone completamente.

This is a success alert — check it out!

<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 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>

Press Enter to start editing

Variantes

Duas variantes adicionais estão disponíveis – delineado e preenchido:

Delineado

This is an error alert — check it out!

This is a warning alert — check it out!

This is an info alert — check it out!

This is a success alert — check it out!

<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="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>

Press Enter to start editing

When using an outlined alert with the Snackbar component, background content will be visible and bleed through the alert by default. You can prevent this by adding bgcolor: 'background.paper' to thesx prop on the Alert component.

Preenchido

This is an error alert — check it out!

This is a warning alert — check it out!

This is an info alert — check it out!

This is a success alert — check it out!

<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>

<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>

Press Enter to start editing

Toast

You can use the Snackbar to display a toast with the Alert.

Cor

The color prop will override the default color for the specified severity.

This is a success alert — check it out!

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

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

Press Enter to start editing

Acessibilidade

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alert/)

When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads.

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text.

Actions must have a tab index of 0 so that they can be reached by keyboard-only users.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.