fn-design-system/components/empty_state.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, framework, has_state, emits, props, output, params

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	tested	tests	test_file_path	file_path	framework	has_state	emits	props	output	params
empty_state	component	ts	ui	1.0.0	impure	EmptyState(props: EmptyStateProps): JSX.Element	Placeholder para listas y tablas vacías con icono, título, descripción y acción opcional. Tabler Icons por defecto.	empty-state placeholder no-data component ui mantine				false		@mantine/core @tabler/icons-react	false			frontend/functions/ui/empty_state.tsx	react	false	onAction	name type required description icon React.ReactNode false Icono a mostrar. Default: IconInbox de @tabler/icons-react. name type required description title string false Título del empty state. Default: 'No data found'. name type required description description string false Descripción explicativa. Default: 'There are no items to display yet.'. name type required description actionLabel string false Texto del botón de acción. Se muestra solo si también hay onAction. name type required description onAction () => void false Callback del botón de acción. Se muestra solo si también hay actionLabel. name type required description size MantineSize false Tamaño general del componente. Afecta el icono, texto y botón. Default: 'md'. name type required description children React.ReactNode false Contenido custom renderizado debajo de la descripción y antes del botón.	Componente EmptyState centrado con icono, mensaje y botón de acción para estados sin datos	name desc props Props del componente EmptyState

Ejemplo

import { EmptyState } from '@fn_library/empty_state'

// Default — sin datos
<EmptyState />

// Con acción
<EmptyState
  title="No functions found"
  description="Try adjusting your search or create a new function."
  actionLabel="Create function"
  onAction={() => navigate('/new')}
/>

// Con icono custom
import { IconDatabase } from '@tabler/icons-react'

<EmptyState
  icon={<IconDatabase size={48} stroke={1.5} />}
  title="No databases connected"
  description="Connect a database to start querying data."
  size="lg"
/>

// Dentro de una Card
import { Card } from '@mantine/core'
import { EmptyState } from '@fn_library/empty_state'

<Card withBorder p="xl">
  <EmptyState
    title="No results"
    description="Your query returned no rows."
    size="sm"
  />
</Card>

Notas

El tamaño del icono escala con size: xs=32, sm=40, md=48, lg=64, xl=80. El orden del heading (Title order) es 5 para xs/sm y 4 para md/lg/xl. El botón usa variant="light" de Mantine — hereda el color primario del tema. children se renderiza entre la descripción y el botón, útil para filtros o links adicionales.