Saltar al contenido
Ayuda a traducir esta página

Alert

Un Alert muestra un breve mensaje importante de una forma que atrae la atención del usuario sin necesidad de interrumpir el trabajo al usuario.

Nota: Este componente no está documentado en la pautas Material Design, pero Material-UI lo soporta.

Alert simples

El componente Alert ofrece cuatro niveles de gravedad que establecen un icono y un color distintivos.

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

Descripción

Puede utilizar el componente AlertTitle para mostrar un título formateado por encima del contenido.

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

Acciones

El componente Alert puede tener una acción, como un botón cerrar o deshacer. Es rendereado después del mensaje, al final del Alert.

Si se proporciona una devolución de llamada onClose y no se establece ningún accesorio de action, se muestra un icono de cierre. El accesorio de action se puede usar para proporcionar una acción alternativa, por ejemplo, usando un Button o un 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>

Transición

Puede utilizar el componente de transition como Colapse para la transición del componente Alert.

Iconos

El icon prop permite añadir un icono para el inicio del componente Alert. Esto anulará el icono por defecto para la gravedad especificada.

Puede cambiar el ícono de la gravedad por defecto mediante la propidad iconMapping. Esta puede ser definida de forma global usando Tema personalizado.

Al establecer la propiedad icon en false, el ícono no se mostrará.

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

Variants

Están disponibles dos variantes adicionales - outlined y filled:

Contorno

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

Relleno

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

Mensaje emergente

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

Color

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

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

Accesibilidad

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#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