Message
Inline feedback that belongs inside forms, cards, panels and normal page flow. It is immediate, accessible, theme-aware and independent from the global Message store.
STANDALONE API
Import
The renderer and headless notification store share one granular entry point but remain independent.
Basic inline feedback
Unlike Toast, Message occupies layout space and stays exactly where it is declared.
Semantic severities
The full surface follows severity while primary and surface palettes continue to work in light and dark mode.
Filled, outlined and simple
Use filled for prominent notices, outlined for quieter panels and simple for compact field guidance.
Sizes and icons
Automatic Neural Icons can be replaced, recolored through ordinary classes or disabled.
Controlled dismissal
visible is a two-way Signal model. Closing emits one semantic event; the consumer decides when it returns.
Projected content and actions
Plain content stays in the message body. Mark controls with message-actions to keep them in the trailing action slot.
Unstyled and typed slots
Unstyled removes NeuralNg’s visual layer while semantics, model, dismissal and stable structural hooks remain.
Message, Toast and Message API
Inline, local and declarative. Best inside forms and component surfaces.
Floating renderer with positioning, timers, channels and swipe dismissal.
Headless Signal store used when application actions publish notifications.
ACCESSIBILITY
Meaningful feedback by default
Visual severity never replaces text. Live announcements and close controls follow native semantics.
Live semantics
Error uses role="alert" and assertive announcements. Other severities use role="status" and polite announcements. Set ariaLive="off" for content already described by a field.
Dismissal
Closable messages expose a native button with a configurable accessible label. Decorative icons are hidden from assistive technology.
Motion and direction
Logical layout mirrors in RTL. Enter and leave animation durations collapse under reduced-motion preferences.
PUBLIC CONTRACT
Message API
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| severity | NeuralMessageSeverity | 'info' | Semantic color and announcement intent. |
| title | string | null | null | Optional concise heading. |
| message | string | null | null | Inline detail; projected content is also supported. |
| variant | 'filled' | 'outlined' | 'simple' | 'filled' | Visual treatment. |
| size | 'small' | 'medium' | 'large' | 'medium' | Density preset. |
| icon | boolean | true | Shows the automatic severity icon. |
| iconClass | string | null | null | Overrides the icon and accepts utility classes. |
| closable | boolean | false | Provides a keyboard-accessible close button. |
| closeLabel | string | 'Close message' | Accessible close button name. |
| ariaLive | 'auto' | 'off' | 'polite' | 'assertive' | 'auto' | Live-region override. |
| unstyled | boolean | false | Removes every NeuralNg visual class. |
| messageClass | string | '' | Adds consumer classes to the root. |
| classes | NeuralMessageClasses | {} | Typed class slots. |
Models and events
visiblemodel<boolean>trueControlled rendered state with visibleChange.
closedvoid—Emitted after an explicit user close.
Typed class slots
rooticoncontenttitledetailactionscloseStore type boundary
NeuralMessage is the inline component. NeuralMessageRecord is the immutable notification record exposed by NeuralMessageService. The explicit names prevent renderer and data contracts from being confused.
MESSAGE
Design tokens
Neutral, dark mode and experimental token packages share one stable surface.
Component tokens
--neural-message-gapSpacing between component items.
--neural-message-paddingComponent internal spacing.
--neural-message-content-gapSpacing between content items.
--neural-message-icon-sizeIcon width and height.
--neural-message-colorComponent foreground color.
--neural-message-backgroundComponent background surface.
--neural-message-border-widthBorder inline size.
--neural-message-border-colorComponent border color.
--neural-message-radiusComponent corner radius.
--neural-message-shadowComponent box shadow.
--neural-message-font-familyComponent font family.
--neural-message-primary-colorPrimary severity foreground color.
--neural-message-secondary-colorSecondary severity foreground color.
--neural-message-neutral-colorNeutral severity foreground color.
--neural-message-info-colorInfo severity foreground color.
--neural-message-success-colorSuccess severity foreground color.
--neural-message-warning-colorWarning severity foreground color.
--neural-message-error-colorError severity foreground color.
--neural-message-focus-ringComponent keyboard focus ring.
--neural-message-enter-durationComponent enter animation duration.
--neural-message-leave-durationComponent leave animation duration.