Messages

Summary

Banners that surface non-interactive feedback inline in the page flow. Five semantic variants (info, warning, error, success, hint) plus a closeable modifier. Optional title and a leading icon that inherits the per-variant color.

When to use

Variant	Use it for
Info `.neura-message-info`	Neutral state changes the user should know about (system status, backups, environment notices).
Warning `.neura-message-warning`	Something needs attention but isn't blocking: degraded service, partial failures, missing data.
Error `.neura-message-error`	Destructive or failed operations. Reserve for hard errors the user must address.
Success `.neura-message-success`	Confirms a completed action. Often paired with the closeable modifier so the user can dismiss after reading.
Hint `.neura-message-hint`	Tip-of-the-day, keyboard shortcut callouts, contextual help.
Closeable `.neura-message-closeable`	Modifier: adds room for a close button. Combine with any variant.

Examples

Every variant rendered inline. The two closeable demos auto-bind their close button; clicking the X removes the message from the DOM.

Generic / info

Backup stale

This instance was last backed up on Thursday, 18 September 2011.

Warning

Backing up attachments

Attachments will not be backed up. This needs to be done manually.

Error

Destructive operation!

Data import will wipe all existing content - make sure you backup first!

Success

Success!

You have backed up your system to C:/backups/filename.xml.

Hint

Hint

Use the keyboard shortcut ? to see all available shortcuts.

Closeable

Success!

You have backed up your system!

Custom Context Demo

Because you often need to specify where the message goes.

Solid (opt-in loud variant)

Add .neura-message-solid when a notice needs banner-level salience (the same palette the banners use). The subtle tints stay the default; error is already solid. Solid info uses the brand primary token, so it follows themes. There is no solid hint.

Scheduled upgrade

Nsys will restart tonight at 22:00 UTC. Details.

License expiring

Your license expires in 5 days.

Import finished

1,204 devices imported with no conflicts.

Without title

An info message with body text only and no title.

Something went wrong. Retry.

HTML

Basic info message. The leading icon picks up the per-variant color via currentColor.

<div class="neura-message neura-message-info">
  <span class="neura-icon neura-icon-info"></span>
  <p class="title"><strong>Heads up</strong></p>
  <p>Body text describing the message.</p>
</div>

Recommended icon per variant:

Variant	Icon
`info` · `hint`	`neura-icon-info`
`warning`	`neura-icon-triangle-alert`
`error`	`neura-icon-circle-alert`
`success`	`neura-icon-check`

For the closeable variant, add the modifier class and a .neura-message-close button:

<div class="neura-message neura-message-success neura-message-closeable">
  <span class="neura-icon neura-icon-check"></span>
  <p class="title"><strong>Saved</strong></p>
  <p>Your changes have been saved.</p>
  <button class="neura-message-close" aria-label="Dismiss">
    <span class="neura-icon neura-icon-close"></span>
  </button>
</div>

Without a title, omit the p.title paragraph:

<div class="neura-message neura-message-info">
  <span class="neura-icon neura-icon-info"></span>
  <p>Plain body text only, no heading.</p>
</div>

For the solid variant, add the modifier for banner-level salience (info/warning/success only):

<div class="neura-message neura-message-solid neura-message-info">
  <span class="neura-icon neura-icon-info"></span>
  <p class="title"><strong>Scheduled upgrade</strong></p>
  <p>Nsys will restart tonight at 22:00 UTC. <a href="#">Details</a>.</p>
</div>

CSS classes

Class	Effect
`.neura-message`	Base banner. Required on every variant.
`.neura-message-info`	Blue-bordered neutral notification.
`.neura-message-warning`	Yellow-bordered cautionary notification.
`.neura-message-error`	Red-filled destructive/error notification (white text).
`.neura-message-success`	Green-bordered confirmation.
`.neura-message-hint`	Gray-bordered tip / contextual help.
`.neura-message-solid`	Modifier: loud banner-palette fill for info/warning/success (error is already solid; no solid hint). Neura-native, no `aui-*` alias.
`.neura-message-closeable`	Modifier: reserves right-side padding for the close button.
`.neura-message-close`	The close button itself.
`p.title`	The bold heading paragraph inside a message (optional).

JavaScript

Closeable messages auto-init on DOMContentLoaded; clicking the .neura-message-close button removes the message from the DOM. No JS is needed for the basic close behavior. Use the API only when you want to listen for the dismiss event, or to manually dismiss a message you rendered dynamically.

API

Member	Description
`Neura.message(elOrSelector)`	Get the singleton instance for a message element. Idempotent: repeated calls return the same instance.
`Neura.message.create(options)`	Build a message dynamically: `{type, title, body\|bodyHtml, closeable, context}`. Adds the per-variant icon and a live-region role (`alert` for error/warning, `status` otherwise) so screen readers announce it; appends into `context` (element or selector) or, with no context, returns unattached for you to insert via `.el`. Returns the instance.
`.dismiss()`	Dismiss programmatically: fires the dismiss event, then removes the message from the DOM.
`.on('dismiss', fn)`	Subscribe to the dismiss event (also emitted as the `neura-message-dismiss` CustomEvent). Fired just before the message is removed from the DOM.
`.off('dismiss', fn)`	Unsubscribe.

Listen for dismissal:

<div class="neura-message neura-message-info neura-message-closeable" id="welcome">
  <span class="neura-icon neura-icon-info"></span>
  <p>Welcome back!</p>
  <button class="neura-message-close" aria-label="Dismiss">
    <span class="neura-icon neura-icon-close"></span>
  </button>
</div>

<script>
  Neura.message('#welcome').on('dismiss', () => {
    localStorage.setItem('seen-welcome', '1');
  });
</script>

Render a message dynamically and append it to a container:

const m = Neura.message.create({
  type: 'success',
  title: 'Saved',
  body: 'Your changes have been saved.',   // plain text; use bodyHtml for markup
  closeable: true,
  context: '.flash-area',                  // element or selector to append into
});
m.on('dismiss', () => console.log('gone'));

// Without `context` the message is built but not inserted -
// place it yourself via the instance:
const hint = Neura.message.create({ type: 'hint', body: 'Press ? for shortcuts.' });
form.before(hint.el);

AUI compatibility

Every .aui-message* class is aliased onto the .neura-message* rules. The AJS.messages creators (.success(), .error(), .warning(), .info(), .hint()) are compat aliases over Neura.message.create. They keep AUI's (context, options) signature and default #aui-message-bar insertion, and their messages now carry the per-variant icon like the rest of Neura. .makeCloseable() is wired through the shim. Existing Velocity templates render unchanged.