fn-design-system/components/error_page.md

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

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	params	output	has_state	framework	emits	tested	tests	test_file_path	file_path
error_page	component	ts	ui	1.0.0	impure	ErrorPage(config: ErrorPageConfig): JSX.Element	Genera página de error con código grande, título, descripción y acciones. Soporta 404, 500, 403 y cualquier código custom.	error 404 500 page empty-state ui mantine				false		react @mantine/core	name desc code Código de error numérico o string a mostrar prominentemente (404, 500, 403, o cualquier valor custom) name desc title Título del error mostrado bajo el código. Default: 'Page not found' name desc description Descripción explicativa del error. Default: mensaje genérico de página no encontrada name desc actionLabel Texto del botón de acción principal. Default: 'Go back to home' name desc onAction Callback invocado al pulsar el botón de acción principal name desc extraActions Nodos React adicionales renderizados junto al botón principal (botones secundarios, links, etc.)	Página de error centrada con código prominente, mensaje descriptivo y botones de acción	false	react	onAction	false			frontend/functions/ui/error_page.tsx

Ejemplo

import { ErrorPage } from '@fn_library/error_page'
import { Button } from '@mantine/core'

// 404 con defaults
<ErrorPage onAction={() => navigate('/')} />

// 500 custom
<ErrorPage
  code={500}
  title="Internal Server Error"
  description="Something went wrong on our end. Please try again later or contact support."
  actionLabel="Retry"
  onAction={() => window.location.reload()}
/>

// 403 con acciones extra
<ErrorPage
  code={403}
  title="Access Denied"
  description="You don't have permission to view this page. Contact your administrator to request access."
  actionLabel="Go to Dashboard"
  onAction={() => navigate('/dashboard')}
  extraActions={
    <Button variant="outline" size="md" onClick={() => navigate('/login')}>
      Switch Account
    </Button>
  }
/>

Notas

El código de error se muestra con fz={120} y opacidad reducida (0.25) para crear un efecto visual de fondo sin distraer del mensaje. Acepta number | string para soportar códigos custom como "503" o "Maintenance".