Todos los componentes (204)

Aviso de cookies

Capas · CookieBanner · .amset-cookies

Qué es y cuándo usarlo

La banda de consentimiento de cookies, abajo y sin las trampas de costumbre: aceptar y rechazar pesan lo mismo, con el mismo tamaño y el mismo tipo de botón, uno al lado del otro. Poner «Aceptar» grande y en verde y «Rechazar» pequeño y en gris es justo lo que prohíbe la AEPD.

Cuándo usarlo

La primera visita, mientras no haya una decisión guardada: visible lo decide la aplicación.
link para la política de cookies, dentro del aviso y no escondida en el pie.
onConfigure añade un tercer botón para los ajustes finos, si la aplicación los tiene (configureText, «Configurar» por defecto).
Lo que no hace: guardar la decisión ni cargar etiquetas de terceros. Eso lo hace la aplicación en onDecide, que recibe accepted o rejected y es quien sabe qué está cargando.

Cuándo no

Un aviso de la aplicación entera que no pide decidir nada: GlobalAlert.
Los ajustes finos en sí (qué cookies, una a una): son de la aplicación, en su pantalla o en un Dialog que se abre desde onConfigure.

Teclado: al aparecer se lleva el foco, así que quien navega con teclado no tiene que ir a buscarla al final de la página; con Tab se llega al enlace y a los botones. No atrapa el foco. Cuando la aplicación la oculta (visible={false}), el foco vuelve a donde estaba.

Accesibilidad: es un dialog no modal con el title como nombre: no tapa la página. El icono es adorno.

Aspecto fino: variables CSS --amset-cookies-width (48rem abajo, 24 en la esquina), --amset-cookies-margin y --amset-cookies-padding. Va en la capa --amset-layer-consent: por encima de la página y por debajo de lo modal. position="corner" la deja como tarjeta estrecha, con los dos botones pesando lo mismo igualmente.

Cómo se ve

El aviso esta abajo del todo de la pagina.

<CookieBanner onDecide={(decision) => guardar(decision)} />

Props

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

Prop	Tipo	Para qué sirve
`onDecide`obligatoria	`(decision: CookieDecision) => void`	Se llama con lo que se haya decidido. Guardarlo es cosa de la aplicacion.
`acceptText`	`string`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`configureText`	`string`	—
`link`	`{ readonly text: string; readonly href: string; }`	Enlace a la politica. Va dentro del aviso, no escondido en el pie.
`onConfigure`	`() => void`	Tercer boton para abrir los ajustes finos, si la aplicacion los tiene.
`position`	`CookieBannerPosition`	`bottom` (por defecto) ocupa el ancho; `corner` la deja como una tarjeta.
`rejectText`	`string`	—
`text`	`ReactNode`	—
`title`	`string`	—
`visible`	`boolean`	Con `false` no se pinta: la aplicacion decide si ya estaba contestado.

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-cookies-width`	`48rem`
`--amset-cookies-margin`	`var(--amset-space-4)`
`--amset-cookies-padding`	`var(--amset-space-4)`

Cómo se cambia

.amset-cookies {
  --amset-cookies-width: ...;
  --amset-cookies-margin: ...;
}

En el banco de pruebas

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