EmptyState

Componentes

Marcador centrado para listas vacías y vistas sin datos, con un círculo de icono y una acción opcional.

Con icono y acción

🚀

Aún no hay proyectos

Crea tu primer proyecto para empezar a colaborar con tu equipo.

Sin acción

🔍

Sin resultados

Intenta ajustar los filtros o vuelve más tarde.

Sin icono

Aún no hay nada aquí

El contenido aparecerá en cuanto esté disponible.

Slot de icono personalizado

Bandeja al día

Estás al día. Las nuevas notificaciones aparecerán aquí.

Uso

<EmptyState
  icon="🚀"
  title="No projects yet"
  message="Create your first project to start collaborating with your team."
>
  <Button slot="action" variant="primary">Create project</Button>
</EmptyState>

<EmptyState
  title="Nothing to show here"
  message="Try adjusting your filters or check back later."
/>

Props

Prop	Tipo	Predeterminado	Descripción
`title`	`string`	—	Encabezado con tipografía display para el estado vacío.
`message`	`string`	—	Texto de apoyo, limitado a 420px de ancho.
`icon`	`string`	—	Emoji o texto corto que se muestra dentro del círculo de icono de 72px.

Slots con nombre: icon reemplaza el contenido del círculo de icono,action renderiza el área de acción centrada opcional.