Cookie Banner · Sapphire UI

Collect and revisit privacy choices for optional cookies. Use it with consent-aware integrations so the visitor’s decision controls what runs.

Examples

Choices

HTML markup

Authored custom-element markup. Register the element using Setup below. Demo buttons and their JavaScript handlers are omitted; use the methods and events in the API reference.

Localized

HTML markup

Authored custom-element markup. Register the element using Setup below. Demo buttons and their JavaScript handlers are omitted; use the methods and events in the API reference.

Attributes, methods and events

Native custom element: configure HTML attributes rather than React props. Boolean attributes use presence / absence. Registration is browser-only; server imports do not require a DOM and may export an undefined constructor.

Supported attributes read or observed by this element
Attribute
`accept-label`
`decline-label`
`description`
`force-show`
`heading`
`privacy-label`
`privacy-url`

Public methods
Method
`open()`

Emitted custom events
Event
`close`

Setup

bun add @kongmy-dev/sapphire-ui

For an app using package components throughout, load the full stylesheet once. Add this element registration where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";
import "@kongmy-dev/sapphire-ui/elements/cookie-banner";

Mixing package and vendored components? Follow application setup.