eui documentation
  1. Components
  2. EuiMessageBoxComponent

File

packages/components/eui-message-box/eui-message-box.component.ts

Description

Component for displaying modal message boxes with structured content and customizable actions. This component provides a user-friendly interface for confirmation dialogs, alerts, and other types of modal messages.

The component supports various styling variants through the BaseStatesDirective hostDirective, customizable buttons, and configurable behavior for dialog actions.

Basic Usage

Example :
<eui-message-box #messageBox
  title="Confirm Action"
  (accept)="onConfirm()"
  (dismiss)="onCancel()">
  Are you sure you want to proceed?
</eui-message-box>
Example :
@ViewChild('messageBox') messageBox: EuiMessageBoxComponent;

showMessage() {
  this.messageBox.openMessageBox();
}

With Custom Footer

Example :
<eui-message-box title="Custom Actions">
  <p>Message content</p>
  <eui-message-box-footer>
    <button euiButton>Custom Action</button>
  </eui-message-box-footer>
</eui-message-box>

Accessibility

  • Modal traps focus within the dialog
  • Escape key closes the dialog by default
  • Accept/Dismiss buttons are keyboard accessible

Notes

  • Use openMessageBox() and closeMessageBox() methods to control visibility
  • Supports draggable positioning with isDraggable input
  • Variant styling (primary, danger, warning, etc.) via BaseStatesDirective

Implements

AfterViewInit OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.OnPush
encapsulation ViewEncapsulation.None
HostDirectives BaseStatesDirective
 Inputs : euiPrimary euiSecondary euiInfo euiSuccess euiWarning euiDanger euiVariant 
selector eui-message-box
imports TranslateModule PortalModule OverlayModule A11yModule DragDropModule EUI_BUTTON EUI_ICON
templateUrl ./eui-message-box.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

acceptLabel
Type : string
Default value : 'eui.OK'

Label for the accept/confirm button. Can be a translation key.
dismissLabel
Type : string
Default value : 'eui.CANCEL'

Label for the dismiss/cancel button. Can be a translation key.
e2eAttr
Type : string
Default value : 'eui-dialog'

Data attribute for e2e testing purposes.
hasAcceptButton
Type : boolean
Default value : true

Whether to show the accept/confirm button.
hasDismissButton
Type : boolean
Default value : true

Whether to show the dismiss/cancel button.
hasNoBodyPadding
Type : boolean
Default value : false

Whether to remove padding from the message box body.
height
Type : string
Default value : 'auto'

Height of the message box.
isDraggable
Type : boolean
Default value : false

Whether the message box can be dragged around the screen.
isHandleCloseOnAccept
Type : boolean
Default value : false

Whether to manually handle closing the dialog on accept button click.
isHandleCloseOnClose
Type : boolean
Default value : false

Whether to manually handle closing the dialog on close button click.
isHandleCloseOnDismiss
Type : boolean
Default value : false

Whether to manually handle closing the dialog on dismiss button click.
title
Type : string

Title text displayed in the message box header.
width
Type : string
Default value : '33rem'

Width of the message box.

Outputs

accept
Type : EventEmitter

Event emitted when the accept/confirm button is clicked.
dismiss
Type : EventEmitter

Event emitted when the dismiss/cancel button is clicked.
messageBoxClose
Type : EventEmitter

Event emitted when the message box closes.
messageBoxOpen
Type : EventEmitter

Event emitted when the message box opens.

Methods

Public closeMessageBox
closeMessageBox()

Closes the currently open message box. This method uses the EuiMessageBoxService to close the dialog.

Returns : void
Public openMessageBox
openMessageBox()
Type parameters :
  • HC
  • HCC
  • BC
  • BCC
  • FC
  • FCC

Opens the message box with the current configuration. This method configures and displays the message box using the EuiMessageBoxService.

Returns : void

Properties

baseStatesDirective
Type : unknown
Default value : inject(BaseStatesDirective)
Public content
Type : string | TemplatePortal

Content that will be displayed in the message box body. Can be either a simple string message or a TemplatePortal for more complex content.
euiMessageBoxFooterDirective
Type : QueryList<EuiMessageBoxFooterDirective>
Decorators :
@ContentChild(undefined)

Reference to any custom footer content provided through the eui-message-box-footer directive. Forward reference is used to resolve the circular dependency between the component and directive.
templateRefContent
Type : TemplateRef<ElementRef>
Decorators :
@ViewChild('templateRefContent')

Reference to the template containing the message box content. This will be used to create a portal for the content section.
templateRefFooter
Type : TemplateRef<EuiMessageBoxFooterDirective>
Decorators :
@ViewChild('templateRefFooter')

Reference to the template containing the message box footer. This will be used to create a portal for the footer section.

results matching ""

    No results matching ""