eui documentation
  1. Components
  2. EuiAppTopMessageComponent

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
Methods
Inputs
Outputs
HostBindings
Accessors

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
getcssClasses()
isVisible
getisVisible()
setisVisible(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 ""