# EuiMessageBoxComponent

**Type:** component

<p>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.</p>
<p>The component supports various styling variants through the BaseStatesDirective hostDirective,
customizable buttons, and configurable behavior for dialog actions.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-message-box #messageBox
  title=&quot;Confirm Action&quot;
  (accept)=&quot;onConfirm()&quot;
  (dismiss)=&quot;onCancel()&quot;&gt;
  Are you sure you want to proceed?
&lt;/eui-message-box&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">&#64;ViewChild(&#39;messageBox&#39;) messageBox: EuiMessageBoxComponent;

showMessage() {
  this.messageBox.openMessageBox();
}</code></pre></div><h3>With Custom Footer</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-message-box title=&quot;Custom Actions&quot;&gt;
  &lt;p&gt;Message content&lt;/p&gt;
  &lt;eui-message-box-footer&gt;
    &lt;button euiButton&gt;Custom Action&lt;/button&gt;
  &lt;/eui-message-box-footer&gt;
&lt;/eui-message-box&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Modal traps focus within the dialog</li>
<li>Escape key closes the dialog by default</li>
<li>Accept/Dismiss buttons are keyboard accessible</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use <code>openMessageBox()</code> and <code>closeMessageBox()</code> methods to control visibility</li>
<li>Supports draggable positioning with <code>isDraggable</code> input</li>
<li>Variant styling (primary, danger, warning, etc.) via BaseStatesDirective</li>
</ul>


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

**Standalone:** false

## Inputs

- **acceptLabel**: `string` - <p>Label for the accept/confirm button. Can be a translation key.</p>

- **dismissLabel**: `string` - <p>Label for the dismiss/cancel button. Can be a translation key.</p>

- **e2eAttr**: `string` - <p>Data attribute for e2e testing purposes.</p>

- **hasAcceptButton**: `boolean` - <p>Whether to show the accept/confirm button.</p>

- **hasDismissButton**: `boolean` - <p>Whether to show the dismiss/cancel button.</p>

- **hasNoBodyPadding**: `boolean` - <p>Whether to remove padding from the message box body.</p>

- **height**: `string` - <p>Height of the message box.</p>

- **isDraggable**: `boolean` - <p>Whether the message box can be dragged around the screen.</p>

- **isHandleCloseOnAccept**: `boolean` - <p>Whether to manually handle closing the dialog on accept button click.</p>

- **isHandleCloseOnClose**: `boolean` - <p>Whether to manually handle closing the dialog on close button click.</p>

- **isHandleCloseOnDismiss**: `boolean` - <p>Whether to manually handle closing the dialog on dismiss button click.</p>

- **title**: `string` - <p>Title text displayed in the message box header.</p>

- **width**: `string` - <p>Width of the message box.</p>


## Outputs

- **accept**: `EventEmitter` - <p>Event emitted when the accept/confirm button is clicked.</p>

- **dismiss**: `EventEmitter` - <p>Event emitted when the dismiss/cancel button is clicked.</p>

- **messageBoxClose**: `EventEmitter` - <p>Event emitted when the message box closes.</p>

- **messageBoxOpen**: `EventEmitter` - <p>Event emitted when the message box opens.</p>

