EmptyState

Icono, título y una frase que diga cuándo dejará de estar vacío. Sin acción cuando no hay nada que hacer: una bandeja al día es una buena noticia, no una tarea. El título va en heading (en el kit React era title) y el icono, un <svg>, en el slot icon: el kit lo pinta a 40 px, no hace falta darle tamaño. Para el resultado de un proceso (un pago, una conexión) usa StatusPanel.

Las acciones ya no son objetos { label, onClick }: son botones del kit en el slot actions. El siguiente paso va relleno, el único de la vista (la Regla de una Sola Decisión), y la alternativa en outline; con href, un botón es un enlace. En pantallas estrechas bajan de línea. Pulsa cualquiera de las dos y luego «Borrar respuestas».

compact reduce el aire, el título y el icono (30 px) para un panel lateral o una tarjeta; pon sus botones en size="sm". A pantalla completa, el normal. El título es un encabezado de nivel 3; dentro de una tarjeta que ya tiene el suyo, bájalo con level={4}.

Cuando el vacío lo provoca un filtro, repite lo que se buscó y ofrece deshacerlo. La acción va en outline porque no es la decisión importante de la pantalla. Aparece sin animación: un vacío que entra animado cada vez que filtras cansa. Pulsa «Ver todos los huéspedes».

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