# EuiAppTopMessageComponent

**Type:** component



Banner component displayed at the top of the application shell to communicate important system-wide messages.
Automatically adjusts application layout by reserving vertical space and updating CSS variables for proper content positioning.
Supports dismissible messages, custom content projection, and theme variants through BaseStatesDirective.
Integrates with EuiAppShellService to coordinate layout calculations and viewport changes.

```html
<eui-app>
    <eui-app-top-message euiDanger>
        Test message for App top message
    </eui-app-top-message>
</eui-app>
```

### Accessibility
- Uses role="banner" for semantic landmark identification
- Close button is keyboard accessible (Enter/Space)
- Message content is announced to screen readers
- Color variants provide visual meaning supplemented by text
- Ensure message text is clear and actionable
- Consider using euiWarning or euiDanger for time-sensitive messages

### Notes
- Must be used within eui-app component for proper layout integration
- Automatically adjusts application layout by updating CSS variables
- Color variants: euiPrimary, euiInfo, euiWarning, euiSuccess, euiDanger
- isCloseable adds close button and enables dismissal
- hasCustomContent applies styling for complex HTML layouts
- isVisible controls visibility and triggers layout recalculation
- topMessageClose event emits when close button is clicked
- Height is automatically calculated and communicated to EuiAppShellService
- Responds to viewport changes and recalculates layout
- Content changes are observed and trigger height recalculation
- On destroy, resets layout by removing reserved space
- Use for system-wide announcements, alerts, or important notifications
- Avoid multiple simultaneous top messages (only one supported)
- Message persists across navigation unless dismissed or hidden


**Selector:** `eui-app-top-message`

## Inputs
- **hasCustomContent**: `boolean` - Indicates that custom HTML content is projected into the message area. When true, applies specific styling to accommodate non-standard message layouts.
- **isCloseable**: `boolean` - Enables a close button allowing users to dismiss the top message. When true, displays an icon button that triggers the topMessageClose event and hides the message.
- **isVisible**: `boolean` - Controls the visibility state of the top message banner. When changed, triggers layout recalculation to adjust application content positioning. Setting to false collapses the message and releases reserved vertical space.
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **topMessageClose**: `EventEmitter` - Emitted when the user clicks the close button on a dismissible message. Payload: null Triggered only when isCloseable is true and the close button is clicked.