---
title: "Message"
path: https://www.eonshowroom.eon.com/en/specials/message.html
lastModified: 2026-03-11T12:00:18.341Z
---

# Message

# Message

### Description

The **Message Component** allows Editors to provide clear, styled Feedback to Users, ranging from simple status Updates to critical Error Alerts. It acts as a wrapper for the *eon-ui-error-message* Web Component, ensuring that all Notifications align perfectly with the E.ON UI Kit Design Standards.

Within the Component Dialog, Editors can configure the Message's visual weight (colors), technical behavior (fixed positioning, auto-close), and SEO structure (heading levels). The component features a dedicated content slot (parsys), enabling the inclusion of additional elements like buttons, links, or lists to guide the user's next steps.

### Inspirations

### Usage Rules & Features

##### Features

- Contextual Feedback: Provide immediate Success, Error, or Info States.
- Interactive Content: Support for internal Slots to add Buttons or Links.

##### Properties

- Dynamic Positioning: Option to fix the Message to the Top or Bottom of the Viewport.
- Smart Timer: Automatically dismiss Messages after a set Duration.

##### Design

- Visual Hierarchy: Uses Brand-approved Color Schemes (Error, Success, Neutral).
- Accessibility: Semantic HTML Tags for Headlines and Focus Restoration on Close.

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | no |
| 3 | no |
| 4 | no |
| 5 | no |
| 6 | yes |
| 8 | yes |
| 9 | yes |
| 10 | yes |
| 12 | no |

##### DO's

- Use the Success Type for positive Confirmation of User Actions (e.g., Form Submission).
- Use the Auto-close Timer for non-critical Information to reduce manual Clicks for the User.
- Check the SEO Tag to ensure the Headline fits correctly into the Heading Hierarchy of the Page.

##### DONT's

- Don’t use the Error Type for simple Information; it should be reserved for Issues that require User Attention.

## Configuration

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/message_content%3A1-1?fmt=webp)

### Message Content

- Headline

A standard **Text Field** to enter the **Main Title** of the **Notification**.

- HTML Tag for SEO

A Dropdown Menu to select the Heading Level (e.g., Default, h1–h6) to ensure a correct Document Structure for Search Engines.

- Main Text

A flexible Area that allows Editors to format Text using Bold, Italics, Lists, and Hyperlinks directly within the Message.

- Message Background Color

A **Selection List** to define the **Visual Style** and **Urgency** of the **Message**. **Options** include: **White**, **Grey 100**, **Error** (Red), **Warning** (Yellow), and **Success** (Green).

- Message Icon

A Dropdown to pick a specific **Symbol** from the UI-Kit Library to provide Visual Context for the User.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/message_appearance%3A16-9?fmt=webp)

- Show Close

A Checkbox that adds a Dismiss Icon (X) to the Message, enabling the User to manually close the Notification.

- Show Left Border

Adds a vertical Accent Line to the Left Side of the Box to highlight the Component and align it with the Brand Design.

- Hide Icon

A Toggle to remove the Icon from the Display, which is useful for a clean, Text-only Presentation.

- Fixed Position

An Option to make the Message "sticky," so it stays visible at the Top or Bottom of the Screen while the User scrolls through the Page.

- Fixed Position Alignment

A Setting (available when Fixed Position is active) to choose whether the Message appears at the very Top or the Bottom of the Browser Window.