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