Banner

Banner es para lo que afecta a toda la vista y sigue vigente mientras no se resuelva: una cuenta desconectada, un correo sin verificar, un mantenimiento. Va arriba del todo, a ancho completo, y uno por pantalla. Un aviso sobre una sola tarjeta o un formulario es un Alert; la confirmación de algo que acaba de pasar, un toast.

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

warning es el tono por defecto. El título va en heading (en el kit React era title) y dice lo que el usuario tiene que saber; la descripción ya no se recorta a una línea, ocupa las que necesite. Si hay dos banners a la vez, el segundo casi nunca era de página completa.

La acción va en el slot action (antes, la prop action), en outline y tamaño sm: el único relleno de la pantalla es la decisión que toca ahí, no el aviso (la Regla de una Sola Decisión). En pantallas estrechas baja debajo del texto. dismissible añade la equis: el banner se pliega, queda hidden y emite uz-dismiss. Recordar que se cerró es cosa tuya; en React, escúchalo con un ref mientras el envoltorio no traiga onDismiss.

Pegado al borde superior del área de contenido, antes del título. Un aviso que se puede ignorar sin consecuencias no merece Banner: no lo pongas para anunciar novedades.

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