Alerta

Las alertas muestran mensajes breves al usuario sin interrumpir su uso de la aplicación.

Introducción

Las alertas proporcionan a los usuarios información breve y potencialmente sensible al tiempo de forma discreta.

El componente Alerta de U-Ui incluye varios accesorios para personalizar rápidamente sus estilos y proporcionar señales visuales inmediatas sobre su contenido.

Uso

Una característica clave del patrón de alerta es que no debe interrumpir la experiencia del usuario (Inglés) de la aplicación. Las alertas no deben confundirse con los diálogos de alerta (ARIA), que están pensados para interrumpir al usuario para obtener una respuesta. Utilice el componente U-Ui Dialog si necesita este comportamiento.

Conceptos básicos

import Alert from '@u_ui/u-ui/Alert';

El componente Alerta envuelve su contenido y se estira para llenar el contenedor que lo rodea.

Severidad

La propiedad severity acepta cuatro valores que representan diferentes estados—success (por defecto), info, warning y error —con las correspondientes combinaciones de iconos y colores para cada uno:

Variantes

El componente Alerta viene con dos opciones de estilo alternativas—relleno y contorno —que puede definir utilizando la propiedad variant.

Relleno

Delineado

Color

Utilice la propiedad color para anular el color predeterminado para la severity especificada; por ejemplo, para aplicar colores de advertencia a una alerta success:

Acciones

Añade una acción a tu alerta con la propiedad action. Esto le permite insertar cualquier elemento—una etiqueta HTML, un icono SVG o un componente React como un botón U-Ui—después del mensaje de la alerta, justificado a la derecha.

Si proporciona una llamada de retorno onClose a la alerta sin establecer la propiedad action, el componente mostrará un icono de cierre (✕) por defecto.

Iconos

Utiliza la propiedad icon para reemplazar el icono de una alerta. Al igual que con la propiedad action, el icono puede ser un elemento HTML, un icono SVG o un componente React. Establece esta prop a false para eliminar el icono por completo.

Si necesitas anular todas las instancias de un icono para una determinada severity, puedes utilizar la propiedad iconMapping. Puedes definir esta prop globalmente personalizando el tema de tu aplicación. Ver Theme components-Default props para más detalles.

Personalización

Transiciones

Puedes utilizar Transition components como Collapse para añadir movimiento a la entrada y salida de una Alerta.

Accesibilidad

Estos son algunos factores a tener en cuenta para garantizar que tu Alerta sea accesible:

• Dado que las alertas no están pensadas para interferir en el uso de la aplicación, tu componente Alerta no debería nunca afectar al foco del teclado.
• Si una alerta contiene una acción, esa acción debe tener un tabindex de 0 para que pueda ser alcanzada por usuarios que sólo utilizan el teclado.
• Las alertas esenciales no deben desaparecer automáticamente: las interacciones temporizadas (Inglés) pueden hacer que tu aplicación resulte inaccesible para los usuarios que necesiten más tiempo para comprender o localizar la alerta.
• Las alertas que se producen con demasiada frecuencia pueden inhibir la usabilidad (Inglés) de tu aplicación.
• Las alertas generadas dinámicamente son anunciadas por los lectores de pantalla; las alertas que ya están presentes en la página cuando ésta se carga no son anunciadas.
• El color no aporta significado a la interfaz de usuario para los usuarios que necesitan tecnología de asistencia. Debes asegurarte de que cualquier información transmitida a través del color se indique también de otras formas, como en el propio texto de la alerta o con texto oculto adicional que puedan leer los lectores de pantalla.

Anatomía

El componente Alerta está compuesto por un componente raíz Paper (que se representa como un <div>) que contiene un icono, un mensaje y una acción opcional.

<div class="uiPaper-root VandleeAlert-root" role="alert">
  <div class="uiAlert-icon">
    <!-- icono svg aquí -->
  </div>
  <div class="uiAlert-message">Esto es como una Alerta se renderiza en el DOM.</div>
  <div class="uiAlert-action">
    <!-- Elemento de acción opcional aquí -->
  </div>
</div>

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

• <Alert />
• <AlertTitle />