hp-banner

Inline informational callout — non-dismissable, sits in the document flow. Use to mark notes, tips, warnings, alerts, and errors within page content. tone drives both the accent colour and the leading icon; label adds an uppercase header above the slotted body. Sibling of <hp-toast> (transient floating notification).

Examples

API

Intent

Changelog

Default tone (neutral). Use for general information that helps the reader without changing what they have to do.

Confirmation or a helpful suggestion. Often pairs with a successful action or a recommended path.

Something to be careful about — non-blocking but worth attention before proceeding.

Critical context. Reach for this when the reader needs to know something before anything else on the page makes sense.

Something went wrong, or this approach won't work. Pair with the path to recovery.

Design-system Do — use as the default button on any surface; the action variant's hue swap reads as interactive.

Design-system Don't — wrap multi-line content in <hp-button>; it expects a single-line label.

Label is optional — leave it off when the banner stands alone and the tone is unambiguous from the body.

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`tone`	`tone`	`HpBannerTone`	`"neutral"`	Semantic tone. `alert` / `error` upgrade role to "alert" for assertive screen-reader announcement.
`label`	`label`	`string \| undefined`	—	Optional uppercase header label (e.g. "Note", "Warning").

Slots

Slot	Description
`(default)`	Banner body content

CSS Parts

Part	Description
`banner`	The wrapping container
`icon`	The leading icon
`label`	The uppercase label header (when set)

When to use

Use inline within content to draw attention to something the reader should know before proceeding: prerequisites, caveats, gotchas.

Match tone to severity — most callouts are neutral or warn; reserve alert / error for things that really demand the reader's full attention.

Use for transient feedback (just-saved confirmations, undo prompts). That's <hp-toast> — it auto-dismisses and floats over content.

Stack multiple banners back-to-back. If the page has more than two or three, the warnings stop reading as warnings — restructure the content instead.

Accessibility

tone="alert" / "error" auto-stamp role="alert" on the host so assistive tech announces them assertively. The other tones use role="note". The leading icon is aria-hidden — the label and body carry the meaning.