Banner · Sapphire UI

Show a dismissible announcement across a page. Use it for a service update or timely notice that applies beyond one field or card.

Examples

Announcement

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.

Persistent

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
`dismiss-label`
`dismissible`
`hidden`
`storage-key`
`variant`

Public methods
Method
`dismiss()`
`show()`

Emitted custom events
Event
`dismiss`

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/banner";

Mixing package and vendored components? Follow application setup.