Note

This documentation describes the Message Vue component for native UI views for Xml templates see message.

Message

A dismissible alert banner with severity-based color variants and an optional icon.

Import

import { Message } from '@neos/design-system'

Props

Prop	Type	Default	Description
severity	'info' \| 'positive' \| 'warning' \| 'danger'	'info'	Color variant and icon type
visible	boolean \| undefined	undefined	Explicit visibility control. When undefined, the component manages its own visibility
showIcon	boolean	true	Show the severity icon
closable	boolean	false	Show a close button to dismiss the message

Emits

Event	Payload	Description
update:visible	boolean	Emitted when the message is dismissed via the close button

Slots

Slot	Description
default	Message body content

Usage Examples

Info banner

<Message>Your session will expire in 5 minutes.</Message>

Warning with close button

<Message severity="warning" :closable="true" v-model:visible="showWarning">
  Unsaved changes will be lost if you navigate away.
</Message>

Error message

<Message severity="danger" :show-icon="true">
  Failed to save. Please check your connection and try again.
</Message>

Success confirmation

<Message severity="positive"> Record saved successfully! </Message>

Externally controlled visibility

<Message
  severity="info"
  :visible="hasNotification"
  :closable="true"
  @update:visible="hasNotification = false"
>
  A new version is available. Please refresh.
</Message>