11

Feedback

Messages & Alerts Builder Component

Inline notification bars, floating toasts (z-index: 500), and tooltips. Toasts are reusable components rendered via buildToast() mount points or the imperative bsnToast() API. Auto-dismiss: 5000ms default, pause on hover. Color coded by severity. Max 5 stacked. Accessible via aria-live="polite".

Notification Bars — Inline Component

Mount point: <div class="bsn-notification-bar-mount" data-bsn-notification-bar='{"variant":"success","title":"…","message":"…","closable":false}'></div>

Variants: info (Wasatch blue), success (Uinta green), warning (Arches orange), error (Canyonlands red). Icon auto-selected per variant (fa-circle-info / fa-circle-check / fa-triangle-exclamation / fa-circle-xmark). role="alert" for warning + error; role="status" for info + success.

Config: variant (required), message (plain text, escaped), title (optional — rendered as <strong> prefix), html: true (skip escape — use only with trusted content), closable (default false — adds dismiss button). NEVER hardcode .notification-bar markup.

Toast Messages — Floating Component

Reusable toast notifications rendered via buildToast() mount points or fired imperatively with bsnToast(). Toasts stack in a fixed container (top-right, z-index 500), slide in with a spring animation, auto-dismiss with a progress bar, and pause on hover. NEVER hardcode toast HTML — always use the .bsn-toast-mount mount point or bsnToast().

Variants (static preview)

Saved
Your changes have been saved.
Error
Something went wrong. Please try again.
Warning
Flow has no audience assigned.
Info
New integration available: Microsoft Teams.

With action buttons

Sync failed
Unable to connect to Microsoft Teams.

Interactive demo

Behavior: Slide-in from right (280ms spring curve) · Auto-dismiss 5000ms default · Progress bar shows countdown · Hover pauses timer · Max 5 visible, oldest dismissed first · Exit slides out right + collapses (360ms) · Mobile: bottom-anchored full-width.

Accessibility: Container: role="status" aria-live="polite" aria-atomic="false" · Close buttons: aria-label="Dismiss notification" · Hover pauses auto-dismiss for motor-impaired users.

Imperative API: bsnToast({variant, title, description, timeout, persistent, actions, closable, class}) — returns {dismiss(), element}.

Mount point: <div class="bsn-toast-mount" data-bsn-toast='{"variant":"success","title":"Saved","description":"Your changes have been saved."}'></div>

Tooltips Component

The trigger element and the surrounding .tooltip-wrap stay in page-author hands — the builder renders only the popup bubble. Hover (or keyboard focus on the wrap) reveals the tooltip via the existing :hover / :focus-within CSS rule.

Hover or tab-focus the wrap to reveal. Background Alpine · Text Salt · Arrow 5px · Transition 150ms

Mount point: <div class="tooltip-wrap"><button>…</button><div class="bsn-tooltip-mount" data-bsn-tooltip='{"text":"…","placement":"top","shortcut":"⌘S"}'></div></div>

Variants: placement = "top" (default) | "bottom" | "left" | "right". Each places the arrow on the opposite edge automatically.

Config: text (required), placement, shortcut (optional — small monospace badge appended after the text), class. NEVER hardcode <div class="tooltip">…</div> directly — always use the mount point inside a .tooltip-wrap.