Todos los componentes (204)

Pie de página

Estructura · SiteFooter · .amset-footer

Qué es y cuándo usarlo

El pie de una página: marca y descripción, columnas de enlaces, redes sociales y la franja legal con sus controles. Es un <footer> de verdad, no un div con aspecto de pie.

Cuándo usarlo

Al pie de un sitio público o de una aplicación: dentro de AppShell (footer={<SiteFooter … />}) o al final del <body> en un diseño propio.

Cuándo no

Para el pie de una tarjeta, un diálogo o una tabla: esos tienen el suyo (footer de Card, Dialog).
Dentro de un <main>, un <article> o un <section>: ahí un <footer> deja de ser el pie de la página.

Accesibilidad: colgando directamente del documento, el navegador lo expone como contentinfo, el punto de referencia al que un lector de pantalla salta con una tecla. Cada columna es un <nav> cuyo nombre es su título, para distinguirla de la navegación principal; la franja legal es otra navegación («Información legal»). Los títulos son h2 por defecto y se ajustan con headingLevel para no saltarse niveles. Un enlace externo (https://… o external) se abre en otra pestaña con rel="noopener noreferrer", lleva un icono y el aviso «se abre en una pestaña nueva» para el lector de pantalla. Las redes son solo icono, y su nombre es el texto de label.

Teclado: no tiene teclado propio; son enlaces y Tab los recorre en el orden en que se leen. Con onNavigate el clic normal de un enlace interno lo resuelve el enrutador del proyecto; Ctrl, Cmd, Mayúsculas o el botón central lo abren aparte.

Aspecto fino: variables CSS --amset-footer-*: -bg, -gap, -padding y -column-width (ancho mínimo de una columna).

Cómo se ve

<SiteFooter
  brand="Joyería Aurelia"
  description="Piezas hechas a mano en Valencia desde 1987."
  sections={[
    { key: 'tienda', title: 'Tienda', links: [{ key: 'anillos', label: 'Anillos', href: '/anillos' }] },
  ]}
  legal="© 2026 Joyería Aurelia"
  legalLinks={[{ key: 'privacidad', label: 'Privacidad', href: '/privacidad' }]}
/>

Props

Se importa con import { SiteFooter } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`actions`	`ReactNode`	Controles de la franja de abajo: selector de idioma, de tema...
`brand`	`ReactNode`	El logo o el nombre de la marca, arriba a la izquierda.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`description`	`ReactNode`	Una o dos frases bajo la marca.
`headingLevel`	`3 \| 4 \| 2`	Nivel de los titulos de columna (`h2` por defecto). Tiene que seguir al `h1` de la pagina sin saltarse niveles.
`legal`	`ReactNode`	Linea legal: «© 2026 Joyería Aurelia».
`legalLinks`	`readonly FooterLink[]`	Enlaces de la franja legal: aviso legal, privacidad, cookies.
`onNavigate`	`(href: string) => void`	Navega el enrutador del proyecto y no el navegador, igual que en `Link`.
`sections`	`readonly FooterSection[]`	Columnas de enlaces: cada una es un `<nav>` con su titulo.
`social`	`readonly FooterSocialLink[]`	Redes sociales, solo con icono.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-footer-bg`	`var(--amset-surface)`
`--amset-footer-gap`	`var(--amset-space-8)`
`--amset-footer-column-width`	`10rem`
`--amset-footer-padding`	`var(--amset-space-8) var(--amset-space-6)`

Cómo se cambia

.amset-footer {
  --amset-footer-bg: ...;
  --amset-footer-gap: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: