# EuiMessageBoxComponent

**Type:** component



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
```html
<eui-message-box #messageBox
  title="Confirm Action"
  (accept)="onConfirm()"
  (dismiss)="onCancel()">
  Are you sure you want to proceed?
</eui-message-box>
```

```typescript
@ViewChild('messageBox') messageBox: EuiMessageBoxComponent;

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

### With Custom Footer
```html
<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


**Selector:** `eui-message-box`

## Inputs
- **acceptLabel**: `string` - Label for the accept/confirm button. Can be a translation key.
- **dismissLabel**: `string` - Label for the dismiss/cancel button. Can be a translation key.
- **e2eAttr**: `string` - Data attribute for e2e testing purposes.
- **hasAcceptButton**: `boolean` - Whether to show the accept/confirm button.
- **hasDismissButton**: `boolean` - Whether to show the dismiss/cancel button.
- **hasNoBodyPadding**: `boolean` - Whether to remove padding from the message box body.
- **height**: `string` - Height of the message box.
- **isDraggable**: `boolean` - Whether the message box can be dragged around the screen.
- **isHandleCloseOnAccept**: `boolean` - Whether to manually handle closing the dialog on accept button click.
- **isHandleCloseOnClose**: `boolean` - Whether to manually handle closing the dialog on close button click.
- **isHandleCloseOnDismiss**: `boolean` - Whether to manually handle closing the dialog on dismiss button click.
- **title**: `string` - Title text displayed in the message box header.
- **width**: `string` - Width of the message box.
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **accept**: `EventEmitter` - Event emitted when the accept/confirm button is clicked.
- **dismiss**: `EventEmitter` - Event emitted when the dismiss/cancel button is clicked.
- **messageBoxClose**: `EventEmitter` - Event emitted when the message box closes.
- **messageBoxOpen**: `EventEmitter` - Event emitted when the message box opens.