### File

`packages/components/layout/eui-app/eui-app-top-message/top-message.component.ts`

### Description

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.

Example :

    <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

### Implements

`AfterViewInit` `OnInit` `OnDestroy`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiInfo euiWarning euiSuccess euiDanger euiVariant
selector | `eui-app-top-message`
imports | `EUI_ICON_BUTTON`
templateUrl | `./top-message.component.html`
styleUrl | `./top-message.scss`

### Index

###### Properties

- appTopMessage
- appTopMessageChanges
- asService
- role

###### Methods

- onCloseClick

###### Inputs

- hasCustomContent
- isCloseable
- isVisible

###### Outputs

- topMessageClose

###### HostBindings

- attr.role
- class

###### Accessors

- cssClasses
- isVisible

### Inputs

hasCustomContent
Type : `boolean`
Default value : `false`
Indicates that custom HTML content is projected into the message area. When true, applies specific styling to accommodate non-standard message layouts.

isCloseable
Type : `boolean`
Default value : `false`
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
Type : `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.

### Outputs

topMessageClose
Type : `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.

### HostBindings

attr.role
Type : `string`
Default value : `'banner'`

class
Type : `string`

### Methods

onCloseClick
`onCloseClick()`
Returns : `void`

### Properties

appTopMessage
Type : `ElementRef`
Decorators : `@ViewChild('appTopMessage')`

appTopMessageChanges
Type : `Subscription`

asService
Type : `unknown`
Default value : `inject(EuiAppShellService)`

role
Type : `string`
Default value : `'banner'`
Decorators : `@HostBinding('attr.role')`

### Accessors

cssClasses
get `cssClasses()`

isVisible
get `isVisible()`
set `isVisible(value: 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.

Parameters :

Name | Type | Optional
value | `boolean` | No

Returns : `void`

# results matching ""

# No results matching ""