All components (204)

Cookie notice

Layers · CookieBanner · .amset-cookies

What it is and when to use it

The cookie consent bar, at the bottom and without the usual traps: accept and reject weigh the same, with the same size and the same kind of button, side by side. Making "Accept" big and green and "Reject" small and gray is exactly what the AEPD forbids.

When to use it

On the first visit, while there is no saved decision: visible is decided by the application.
link for the cookie policy, inside the notice and not hidden in the footer.
onConfigure adds a third button for fine-grained settings, if the application has them (configureText, "Customize" by default).
What it does not do: save the decision or load third-party tags. The application does that in onDecide, which receives accepted or rejected and is the one that knows what is being loaded.

When not to

A notice for the whole application that does not ask for any decision: GlobalAlert.
The fine-grained settings themselves (which cookies, one by one): they belong to the application, on its own screen or in a Dialog opened from onConfigure.

Keyboard: when it appears it takes focus, so someone navigating by keyboard does not have to look for it at the end of the page; Tab reaches the link and the buttons. It does not trap focus. When the application hides it (visible={false}), focus returns to where it was.

Accessibility: it is a non-modal dialog with the title as its name: it does not cover the page. The icon is decoration.

Fine-tuning: CSS variables --amset-cookies-width (48 rem at the bottom, 24 in the corner), --amset-cookies-margin and --amset-cookies-padding. It sits in the --amset-layer-consent layer: above the page and below anything modal. position="corner" turns it into a narrow card, with the two buttons still weighing the same.

What it looks like

The notice is at the very bottom of the page.

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

Props

Import it with import { CookieBanner } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`onDecide`required	`(decision: CookieDecision) => void`	It is called with whatever has been decided. Saving it is the application's business.
`acceptText`	`string`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`configureText`	`string`	—
`link`	`{ readonly text: string; readonly href: string; }`	Link to the policy. It goes inside the notice, not hidden in the footer.
`onConfigure`	`() => void`	Third button to open the fine-grained settings, if the application has them.
`position`	`CookieBannerPosition`	`bottom` (the default) takes up the full width; `corner` leaves it as a card.
`rejectText`	`string`	—
`text`	`ReactNode`	—
`title`	`string`	—
`visible`	`boolean`	With `false` it is not drawn: the application decides whether it was already answered.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-cookies-width`	`48rem`
`--amset-cookies-margin`	`var(--amset-space-4)`
`--amset-cookies-padding`	`var(--amset-space-4)`

How to change it

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

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: