Alert

Alert vive dentro del contenido, junto a lo que explica: una tarjeta, un formulario, una sección. Si el aviso afecta a toda la vista, va en un Banner arriba de la página; si solo confirma algo que acaba de pasar, en un toast que se va solo.

Cambia las props y mira el componente y su código al mismo tiempo.

Cada tono trae su icono y su par de tinte y texto con contraste AA; default es la nota neutra, sin estado. El significado lo carga el título; el color solo lo confirma (la Regla del Tenant). Escribe el título como el hecho, no como la categoría: «Habitación sin tarifa», no «Advertencia». El título va en heading, no en title como en el kit React: title es un atributo de HTML y pintaría un tooltip nativo.

heading y el contenido son opcionales. Usa solo el título cuando el hecho cabe en una línea, y solo el texto para una nota que no necesita titular.

El contenido acepta cualquier marcado. Si el aviso pide un paso, pon un Button variant="link": un botón relleno dentro de un aviso compite con la acción principal de la pantalla (la Regla de una Sola Decisión). Para cambiar el icono, ponlo en el slot icon; para un título con marcado, en el slot heading.

Con dismissible aparece la equis. Al pulsarla, el aviso se funde, pliega su alto para que lo de debajo suba sin salto, queda hidden y emite uz-dismiss. Recordar que se cerró es cosa tuya: vuelve a mostrarlo con hidden={false}. En React, el envoltorio de esta versión aún no trae onDismiss, así que la demo escucha el evento en el elemento con un ref.

El resumen de errores va arriba del formulario y cada campo dice el suyo debajo. danger lleva role="alert", así que al aparecer el lector de pantalla lo anuncia; el resto de tonos, role="status". Pulsa «Emitir factura» con los campos vacíos y luego rellénalos.

Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).