Empty

Estados vacíos con medios, texto y un siguiente paso claro.

No projects yet

You have not created any projects. Create your first one to get started.

1import { Folder01Icon } from '@hugeicons/core-free-icons';
2import { HugeiconsIcon } from '@hugeicons/react';
3import { Button } from '@/components/ui/button';
4import { Empty } from '@/components/ui/empty';
5
6export function Default() {
7  return (
8    <Empty className="max-w-md">
9      <Empty.Header>
10        <Empty.Media variant="icon">
11          <HugeiconsIcon icon={Folder01Icon} size={24} />
12        </Empty.Media>
13        <Empty.Title>No projects yet</Empty.Title>
14        <Empty.Description>
15          You have not created any projects. Create your first one to get started.
16        </Empty.Description>
17      </Empty.Header>
18      <Empty.Content>
19        <Button size="sm">Create project</Button>
20        <Button size="sm" variant="outline">
21          Import
22        </Button>
23      </Empty.Content>
24    </Empty>
25  );
26}

Instalación

pnpm dlx nachui add empty

Anatomía

1import { Empty } from '@/components/ui/empty';

1<Empty>
2  <Empty.Header>
3    <Empty.Media variant="icon">
4      <FolderIcon />
5    </Empty.Media>
6    <Empty.Title>Aún no hay proyectos</Empty.Title>
7    <Empty.Description>Crea tu primer proyecto para empezar.</Empty.Description>
8  </Empty.Header>
9  <Empty.Content>
10    <Button>Crear proyecto</Button>
11  </Empty.Content>
12</Empty>

Composición

Usa la siguiente composición para construir un Empty:

Empty
├── Empty.Header
│   ├── Empty.Media
│   ├── Empty.Title
│   └── Empty.Description
└── Empty.Content

Variantes

Outline

Un borde discontinuo enmarca el estado vacío, útil en layouts densos donde el área en blanco necesita un límite.

No results

Nothing matched your search. Try a different term or clear the filters.

1import { Search01Icon } from '@hugeicons/core-free-icons';
2import { HugeiconsIcon } from '@hugeicons/react';
3import { Button } from '@/components/ui/button';
4import { Empty } from '@/components/ui/empty';
5
6export function Outline() {
7  return (
8    <Empty variant="outline" className="max-w-md">
9      <Empty.Header>
10        <Empty.Media variant="icon">
11          <HugeiconsIcon icon={Search01Icon} size={24} />
12        </Empty.Media>
13        <Empty.Title>No results</Empty.Title>
14        <Empty.Description>
15          Nothing matched your search. Try a different term or clear the filters.
16        </Empty.Description>
17      </Empty.Header>
18      <Empty.Content>
19        <Button size="sm" variant="ghost">
20          Clear filters
21        </Button>
22      </Empty.Content>
23    </Empty>
24  );
25}

Referencia de API

Empty

Prop	Type	Default	Description
`variant`	`'default' \| 'outline' \| 'card'`	`'default'`	Marco del estado: borde discontinuo o una tarjeta
`className`	`string`	-	Clases CSS adicionales

Empty.Media

Prop	Type	Default	Description
`variant`	`'default' \| 'icon'`	`'default'`	`icon` envuelve el hijo en un cuadro de fondo muted
`className`	`string`	-	Clases CSS adicionales

Empty.Title

Prop	Type	Default	Description
`as`	`'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	`'h3'`	Nivel de encabezado
`className`	`string`	-	Clases CSS adicionales

Empty.Header, Empty.Description, Empty.Content

Contenedores de layout para el texto y las acciones. Cada uno acepta className.

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorDropdown Menu

SiguienteField