Saltar al contenido

馃帀 Material UI v5 is out! Head to the migration guide to get started.

Alerta

Una Alerta (alert) muestra un mensaje corto e importante de una manera que atrae la atenci贸n del usuario sin interrumpir la tarea del usuario.

Nota: Este componente no est谩 documentado en las pautas de Material Design, pero Material-UI lo soporta.

Alertas simples

La alerta ofrece cuatro niveles de severidad que distintivamente establecen un icono y un color.

<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

Puedes utilizar el componente AlertTitle para mostrar un t铆tulo formateado 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

Una alerta puede tener una acci贸n, como un bot贸n para cerrar o deshacer. Es renderizado despu茅s del mensaje, al final de la alerta.

Si se proporciona un callback onClose y no se establece una propiedad action, se muestra un icono de cierre. La propiedad action puede ser usada para proveer 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

Puedes utilizar un componente de transition como Collapse para transicionar la apariencia de una alerta.

Iconos

La propiedad icon te permite a帽adir un icono al inicio del componente alerta. Esto anular谩 el icono por defecto para la severidad especificada.

Puedes cambiar el mapeo por defecto de severidad a 铆cono con la propiedad iconMapping. Esto puede ser definido globalmente usando la personalizaci贸n del tema.

Al establecer la propiedad icono a falso, el icono se remover谩 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

Dos variantes adicionales est谩n disponibles 鈥 delineada y rellena:

Delineada

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

Rellenada

<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

Puedes usar el Snackbar para mostrar un mensaje emergente con la alerta.

Color

La propiedad color anular谩 el color por defecto para la severidad especificada.

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

Cuando el componente se muestra din谩micamente, el contenido es anunciado autom谩ticamente por la mayor铆a de los lectores de pantalla. En este momento, los lectores de pantallas no informan a los usuarios de las alertas que est谩n presentes cuando la p谩gina carga.

El uso del color para agregar significado s贸lo proporciona una indicaci贸n visual, que no ser谩 transmitida a los usuarios de tecnolog铆as de asistencia como lectores de pantalla. Asegurate que la informaci贸n denotada por el color es u obvia por el contenido en s铆 mismo (por ejemplo, el texto visible), o es incluida a trav茅s de medios alternativos, tales como un texto oculto adicional.

Las acciones deben tener un 铆ndice de pesta帽as de 0 para que puedan ser alcanzadas por usuarios con s贸lo teclado.