El Empty es un componente utilizado para representar estados vacíos dentro de la plataforma. Su objetivo es comunicar al usuario que aún no hay contenido disponible en una sección específica y ofrecer una guía visual clara sobre las acciones que puede realizar.
Aún no tienes elementos en esta sección.
Centered · Left Aligned
Importa los estilos base y el componente EmptyState para comenzar a utilizarlo.
1import 'nave-ui-library/styles.css'2import { EmptyState } from 'nave-ui-library/react'La alineación central es el estándar para pantallas completas o secciones principales.
Description
Útil para secciones laterales o contenedores angostos donde el texto debe respetar el flujo de lectura natural.
Description
Puedes ajustar el tamaño del componente según el contexto visual donde se utilice.
No tienes mensajes nuevos.
Intenta con otros filtros.
Combinaciones completas de alineación y tamaño para referencia rápida.
| Align / Size | Medium | Small |
|---|---|---|
center | TitleDescription | TitleDescription |
left | TitleDescription | TitleDescription |
Todas las props disponibles para el componente EmptyState.
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Título principal del estado vacío. |
description | ReactNode | — | Descripción opcional para guiar al usuario. |
icon | React.ReactNode | — | Ícono opcional que refuerza el contexto visual. |
actions | ReactNode | — | Slot opcional para una o más acciones (CTA). |
align | 'left' | 'center' | center | Alineación del contenido interno del componente. |
size | 'small' | 'medium' | medium | Escala tipográfica y límites de ancho del contenido. |
className | string | — | Clases adicionales para el contenedor raíz. |
actions | ReactNode | — | Slot de acciones (botones, links) debajo de la descripción. |
className | string | — | Clases CSS adicionales para personalización. |
1{2 "name": "EmptyState",3 "description": "Empty state para mostrar cuando no hay datos.",4 "component": "EmptyState",5 "files": [6 "components/base/data-display/system-feedback/EmptyState.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "title": {13 "type": "ReactNode",14 "required": true,15 "description": "Título principal del estado vacío."16 },17 "description": {18 "type": "ReactNode",19 "description": "Descripción opcional para guiar al usuario."20 },21 "icon": {22 "type": "React.ReactNode",23 "description": "Ícono opcional que refuerza el contexto visual."24 },25 "actions": {26 "type": "ReactNode",27 "description": "Slot opcional para una o más acciones (CTA)."28 },29 "align": {30 "type": "'left' | 'center'",31 "default": "center",32 "description": "Alineación del contenido interno del componente."33 },34 "size": {35 "type": "'small' | 'medium'",36 "default": "medium",37 "description": "Escala tipográfica y límites de ancho del contenido."38 },39 "className": {40 "type": "string",41 "description": "Clases adicionales para el contenedor raíz."42 }43 },44 "states": {45 "default": {}46 }47}