Skip to content

EmptyState

Comunica que no hay contenido y, si aplica, guía a la siguiente acción. No confundir con Skeleton (carga) ni Spinner (proceso).

Preview principal

EMPTY STATEinbox
Tu bandeja está vacía
Cuando recibas mensajes aparecerán aquí. Empieza creando tu primer proyecto.
icon · title · description? · action?

Patrones

Con CTA, solo info, permisos o título mínimo.

PATTERNS

con acción

Sin documentos
Crea tu primer documento para empezar.

sin acción

Sin resultados
No encontramos nada con esa búsqueda.

restringido

Acceso restringido
No tienes permisos para ver este contenido.

solo título

Todo archivado

Uso

Section titled “Uso”
import { EmptyState, Button } from "devsoftec-ui";


<EmptyState
  icon="folder"
  title="Sin documentos"
  description="Crea tu primer documento para empezar."
  action={<Button variant="primary">Crear documento</Button>}
/>

Props

Section titled “Props”
Prop Tipo Default Descripción
icon IconName — Icono decorativo
title ReactNode — Título del estado
description ReactNode — Texto de apoyo
action ReactNode — CTA (suele ser Button)

Comportamiento

Section titled “Comportamiento”
  • Icono con aria-hidden (decorativo)
  • El title debe bastar sin depender del color
  • action es opcional: vacíos informativos no necesitan botón