# EuiDialogComponent

**Type:** component



A modal dialog component that displays content in an overlay above the main application.
Supports customizable headers, footers, action buttons, and various interaction behaviors.
Can be opened programmatically via the openDialog method or controlled declaratively.
Integrates with EuiDialogService for centralized dialog management and supports features
like dragging, fullscreen mode, message box mode, and flexible positioning.

### Using Dialog Service
```typescript
// Component
constructor(private euiDialogService: EuiDialogService) {}

openDialog(): void {
  const config = new EuiDialogConfig({
    title: 'Confirm Action',
    content: 'Are you sure you want to proceed?',
    accept: () => console.log('Accepted'),
    dismiss: () => console.log('Dismissed')
  });
  this.euiDialogService.openDialog(config);
}

// Template
<button euiButton (click)="openDialog()" aria-haspopup="dialog">
  Open Dialog
</button>
```

### Template Reference
```html
<button euiButton (click)="dialog.openDialog()" aria-haspopup="dialog">
  Open Dialog
</button>

<eui-dialog #dialog
  [title]="'Confirmation'"
  [width]="'600px'"
  (accept)="onAccept()"
  (dismiss)="onDismiss()">
  <p>Dialog content goes here</p>
</eui-dialog>
```

### Custom Header and Footer
```html
<eui-dialog #dialog [hasFooter]="false">
  <eui-dialog-header>
    <h2>Custom Header</h2>
  </eui-dialog-header>

  <p>Main content</p>

  <eui-dialog-footer>
    <button euiButton (click)="dialog.closeDialog()">Close</button>
  </eui-dialog-footer>
</eui-dialog>
```

### Accessibility
- Automatically manages focus trap within dialog
- Escape key closes dialog by default (configurable via `hasClosedOnEscape`)
- Close button has proper ARIA label
- Dialog has `role="dialog"` and `aria-modal="true"`
- Focus returns to trigger element on close
- Use `aria-haspopup="dialog"` on trigger buttons

### Notes
- Use `isMessageBox` for critical confirmations that require explicit user action
- `isDraggable` enables repositioning for multi-dialog scenarios
- `isFullScreen` automatically sets width to 98vw and height to 97vh
- `hasClosedOnClickOutside` allows backdrop click to close dialog
- Manual close control via `isHandleCloseOn*` properties for custom workflows
- `verticalPosition` controls dialog placement (top, center, bottom)
- Methods like `disableAcceptButton()` and `scrollToBottom()` available for dynamic control


**Selector:** `eui-dialog`

## Inputs
- **acceptLabel**: `string` - Translation key or label text for the accept button.
- **classList**: `string` - Additional CSS class names to apply to the dialog container. Allows custom styling without modifying component styles.
- **dismissLabel**: `string` - Translation key or label text for the dismiss button.
- **e2eAttr**: `string` - End-to-end testing attribute identifier for the dialog element.
- **hasAcceptButton**: `boolean` - Controls visibility of the accept button in the dialog footer.
- **hasCloseButton**: `boolean` - Controls visibility of the close (X) button in the dialog header. Automatically set to false when isMessageBox is true.
- **hasClosedOnClickOutside**: `boolean` - Enables automatic dialog closure when clicking outside the dialog boundaries. Works in conjunction with isHandleCloseOnClickOutside for manual control.
- **hasClosedOnEscape**: `boolean` - Enables automatic dialog closure when pressing the Escape key. Automatically set to false when isMessageBox is true.
- **hasDismissButton**: `boolean` - Controls visibility of the dismiss button in the dialog footer.
- **hasFooter**: `boolean` - Controls visibility of the entire footer section containing action buttons.
- **hasMobileCustomSize**: `boolean` - Enables custom sizing behavior on mobile devices. When true, applies mobile-specific width and height adjustments.
- **hasNoBodyPadding**: `boolean` - Removes default padding from the dialog body content area. Useful for custom layouts or full-width content.
- **height**: `string` - Height of the dialog. Accepts CSS units (px, %, vh, auto, etc.). Overridden to '97vh' when isFullScreen is true.
- **isDraggable**: `boolean` - Enables drag-and-drop functionality, allowing users to reposition the dialog.
- **isFullScreen**: `boolean` - Enables fullscreen mode, automatically setting width to 98vw and height to 97vh.
- **isHandleCloseOnAccept**: `boolean` - Prevents automatic dialog closure when accept button is clicked. When true, developer must manually handle closure via the accept event.
- **isHandleCloseOnClickOutside**: `boolean` - Prevents automatic dialog closure when clicking outside the dialog. When true, developer must manually handle closure via the clickOutside event. Requires hasClosedOnClickOutside to be true to have effect.
- **isHandleCloseOnClose**: `boolean` - Prevents automatic dialog closure when close (X) button is clicked. When true, developer must manually handle closure via the dialogClose event.
- **isHandleCloseOnDismiss**: `boolean` - Prevents automatic dialog closure when dismiss button is clicked. When true, developer must manually handle closure via the dismiss event.
- **isHandleCloseOnEscape**: `boolean` - Prevents automatic dialog closure when pressing Escape key. When true, developer must manually handle closure via the escape event. Requires hasClosedOnEscape to be true to have effect.
- **isMessageBox**: `boolean` - Enables message box mode, which disables Escape key closure and hides the close button. Intended for dialogs requiring explicit user action via accept or dismiss buttons.
- **title**: `string` - Title text displayed in the dialog header. When changed after dialog is opened, the title updates dynamically.
- **verticalPosition**: `EuiDialogVerticalPosition` - Vertical alignment position of the dialog within the viewport. Controls whether the dialog appears at top, center, or bottom of the screen.
- **width**: `string` - Width of the dialog. Accepts CSS units (px, %, vw, etc.). Overridden to '98vw' when isFullScreen is true.
- **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` - Emitted when the accept button is clicked. Dialog closes automatically unless isHandleCloseOnAccept is true.
- **clickOutside**: `EventEmitter` - Emitted when user clicks outside the dialog boundaries. Fires regardless of hasClosedOnClickOutside setting.
- **dialogClose**: `EventEmitter` - Emitted when the close (X) button is clicked. Dialog closes automatically unless isHandleCloseOnClose is true.
- **dialogOpen**: `EventEmitter` - Emitted immediately after the dialog opens and becomes visible.
- **dismiss**: `EventEmitter` - Emitted when the dismiss button is clicked. Dialog closes automatically unless isHandleCloseOnDismiss is true.
- **escape**: `EventEmitter` - Emitted when user presses the Escape key while dialog has focus. Fires regardless of hasClosedOnEscape setting.