### 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.

### Implements

`AfterViewInit` `OnDestroy`

### Metadata

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

### Index

###### Properties

- baseStatesDirective
- Public content
- euiMessageBoxFooterDirective
- templateRefContent
- templateRefFooter

###### Methods

- Public closeMessageBox
- Public openMessageBox

###### Inputs

- acceptLabel
- dismissLabel
- e2eAttr
- hasAcceptButton
- hasDismissButton
- hasNoBodyPadding
- height
- isDraggable
- isHandleCloseOnAccept
- isHandleCloseOnClose
- isHandleCloseOnDismiss
- title
- width

###### Outputs

- accept
- dismiss
- messageBoxClose
- messageBoxOpen

### 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
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 ""