# Estado vacío

> Qué mostrar cuando no hay datos: básico, contorno, con fondo, sin resultados, con avatares y página no encontrada.

Categoría: Contenido · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- En listas, tablas, búsquedas y carpetas sin contenido.
- Siempre con una acción que lo resuelva, salvo que no haya nada que hacer.
- No para errores: si algo falló, es una Alerta.

## Básico

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-center justify-center gap-6 text-center rounded-ccs p-6 sm:p-12 w-full "><div class="flex flex-col items-center gap-2 max-w-sm"><span class="grid place-items-center w-12 h-12 rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:inbox-outline" class="shrink-0 text-[24px] " aria-hidden="true"></iconify-icon></span><h4 class="mt-2 text-lg font-semibold">Aún no tienes solicitudes</h4><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Cuando crees una, la verás acá con su estado.</p></div><div class="flex flex-wrap justify-center gap-2"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm bg-ccs-blue text-white hover:bg-ccs-blue-mid shadow-ccs-sm dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue  active:scale-95 motion-reduce:active:scale-100">Crear solicitud</button><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Importar</button></div><a href="#" class="inline-flex items-center gap-1 text-sm text-ccs-blue dark:text-ccs-dark-accent hover:underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Cómo funcionan las solicitudes<iconify-icon icon="solar:arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></a></div></div>
```

## Contorno

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-center justify-center gap-6 text-center rounded-ccs p-6 sm:p-12 w-full border border-dashed border-ccs-line-strong dark:border-ccs-dark-line-strong"><div class="flex flex-col items-center gap-2 max-w-sm"><span class="grid place-items-center w-12 h-12 rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:cloud-upload-outline" class="shrink-0 text-[24px] " aria-hidden="true"></iconify-icon></span><h4 class="mt-2 text-lg font-semibold">Esta carpeta está vacía</h4><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Sube archivos para tenerlos a mano desde cualquier equipo.</p></div><div class="flex flex-wrap justify-center gap-2"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:upload-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon>Subir archivos</button></div></div></div>
```

## Con fondo

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-center justify-center gap-6 text-center rounded-ccs p-6 sm:p-12 w-full bg-ccs-bg dark:bg-ccs-dark-surface"><div class="flex flex-col items-center gap-2 max-w-sm"><span class="grid place-items-center w-12 h-12 rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:bell-outline" class="shrink-0 text-[24px] " aria-hidden="true"></iconify-icon></span><h4 class="mt-2 text-lg font-semibold">No tienes avisos nuevos</h4><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Te avisaremos cuando haya novedades.</p></div><div class="flex flex-wrap justify-center gap-2"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:refresh-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon>Actualizar</button></div></div></div>
```

## Sin resultados

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-center justify-center gap-6 text-center rounded-ccs p-6 sm:p-12 w-full "><div class="flex flex-col items-center gap-2 max-w-sm"><span class="grid place-items-center w-12 h-12 rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[24px] " aria-hidden="true"></iconify-icon></span><h4 class="mt-2 text-lg font-semibold">No encontramos resultados para "exportadora sur"</h4><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Revisa cómo lo escribiste o quita algunos filtros.</p></div><div class="flex flex-wrap justify-center gap-2"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Quitar filtros</button></div></div></div>
```

## Con avatar

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-center justify-center gap-6 text-center rounded-ccs p-6 sm:p-12 w-full "><div class="flex flex-col items-center gap-2 max-w-sm"><span class="relative inline-flex"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-12 h-12 text-base ">CR</span><span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-ccs-line-strong ring-2 ring-white dark:bg-ccs-dark-line-strong dark:ring-ccs-dark-bg"></span></span><h4 class="mt-2 text-lg font-semibold">Carolina no está conectada</h4><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Déjale un mensaje y lo verá al volver.</p></div><div class="flex flex-wrap justify-center gap-2"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm bg-ccs-blue text-white hover:bg-ccs-blue-mid shadow-ccs-sm dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue  active:scale-95 motion-reduce:active:scale-100">Dejar mensaje</button></div></div></div>
```

## Con grupo de avatares

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-center justify-center gap-6 text-center rounded-ccs p-6 sm:p-12 w-full "><div class="flex flex-col items-center gap-2 max-w-sm"><div class="flex -space-x-2"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ring-2 ring-white dark:ring-ccs-dark-bg ">CR</span><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ring-2 ring-white dark:ring-ccs-dark-bg ">MP</span><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ring-2 ring-white dark:ring-ccs-dark-bg ">JS</span></div><h4 class="mt-2 text-lg font-semibold">Aún no hay integrantes</h4><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Invita a tu equipo para trabajar juntos.</p></div><div class="flex flex-wrap justify-center gap-2"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 px-4 text-sm bg-ccs-blue text-white hover:bg-ccs-blue-mid shadow-ccs-sm dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue  active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:user-plus-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon>Invitar personas</button></div></div></div>
```

## Página no encontrada

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-center justify-center gap-6 text-center rounded-ccs p-6 sm:p-12 w-full "><div class="flex flex-col items-center gap-2 max-w-sm"><span class="text-ccs-h1 text-ccs-blue dark:text-ccs-dark-accent">404</span><h4 class="mt-2 text-lg font-semibold">No encontramos esta página</h4><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Puede que la dirección esté mal escrita o que la página ya no exista.</p></div><search class="block w-full max-w-xs"><form action="/buscar" method="get"><label for="ev-404-q" class="sr-only">Buscar en el sitio</label><div class="flex w-full items-center rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25 h-11"><input id="ev-404-q" name="q" type="search" autocomplete="off" enterkeyhint="search" placeholder="Buscar en el sitio" class="peer h-full min-w-0 flex-1 bg-transparent pl-4 pr-2 text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none text-base sm:text-sm"><button type="reset" aria-label="Borrar búsqueda" class="peer-placeholder-shown:hidden grid h-8 w-8 shrink-0 place-items-center rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[16px]" aria-hidden="true"></iconify-icon></button><button type="submit" aria-label="Buscar" class="mr-1 grid h-8 w-8 shrink-0 place-items-center rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px]" aria-hidden="true"></iconify-icon></button></div></form></search><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">¿Necesitas ayuda? <a href="#" class="text-ccs-blue dark:text-ccs-dark-accent underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Escríbenos</a></p></div></div>
```