### File

`packages/components/eui-dialog/eui-dialog.component.ts`

### Description

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

Example :

    // 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

Example :

    <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

Example :

    <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

### Implements

`AfterViewInit` `OnDestroy` `OnInit` `OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiInfo euiSuccess euiWarning euiDanger euiVariant
providers | `null`
selector | `eui-dialog`
templateUrl | `./eui-dialog.component.html`
styleUrl | `./eui-dialog.scss`

### Index

###### Properties

- baseStatesDirective
- Public content
- euiDialogFooterDirective
- euiDialogHeaderDirective
- Public isOpen$
- templateRefContent
- templateRefFooter
- templateRefHeader

###### Methods

- Public closeDialog
- Public disableAcceptButton
- Public disableDismissButton
- Public enableAcceptButton
- Public enableDismissButton
- Public openDialog
- Public scrollToBottom
- Public scrollToTop

###### Inputs

- acceptLabel
- classList
- dismissLabel
- e2eAttr
- hasAcceptButton
- hasCloseButton
- hasClosedOnClickOutside
- hasClosedOnEscape
- hasDismissButton
- hasFooter
- hasMobileCustomSize
- hasNoBodyPadding
- height
- isDraggable
- isFullScreen
- isHandleCloseOnAccept
- isHandleCloseOnClickOutside
- isHandleCloseOnClose
- isHandleCloseOnDismiss
- isHandleCloseOnEscape
- isMessageBox
- title
- verticalPosition
- width

###### Outputs

- accept
- clickOutside
- dialogClose
- dialogOpen
- dismiss
- escape

###### Accessors

- isOpen

### Inputs

acceptLabel
Type : `string`
Default value : `'eui.OK'`
Translation key or label text for the accept button.

classList
Type : `string`
Default value : `null`
Additional CSS class names to apply to the dialog container. Allows custom styling without modifying component styles.

dismissLabel
Type : `string`
Default value : `'eui.CANCEL'`
Translation key or label text for the dismiss button.

e2eAttr
Type : `string`
Default value : `'eui-dialog'`
End-to-end testing attribute identifier for the dialog element.

hasAcceptButton
Type : `boolean`
Default value : `true`
Controls visibility of the accept button in the dialog footer.

hasCloseButton
Type : `boolean`
Default value : `true`
Controls visibility of the close (X) button in the dialog header. Automatically set to false when isMessageBox is true.

hasClosedOnClickOutside
Type : `boolean`
Default value : `false`
Enables automatic dialog closure when clicking outside the dialog boundaries. Works in conjunction with isHandleCloseOnClickOutside for manual control.

hasClosedOnEscape
Type : `boolean`
Default value : `true`
Enables automatic dialog closure when pressing the Escape key. Automatically set to false when isMessageBox is true.

hasDismissButton
Type : `boolean`
Default value : `true`
Controls visibility of the dismiss button in the dialog footer.

hasFooter
Type : `boolean`
Default value : `true`
Controls visibility of the entire footer section containing action buttons.

hasMobileCustomSize
Type : `boolean`
Default value : `false`
Enables custom sizing behavior on mobile devices. When true, applies mobile-specific width and height adjustments.

hasNoBodyPadding
Type : `boolean`
Default value : `false`
Removes default padding from the dialog body content area. Useful for custom layouts or full-width content.

height
Type : `string`
Default value : `'auto'`
Height of the dialog. Accepts CSS units (px, %, vh, auto, etc.). Overridden to '97vh' when isFullScreen is true.

isDraggable
Type : `boolean`
Default value : `false`
Enables drag-and-drop functionality, allowing users to reposition the dialog.

isFullScreen
Type : `boolean`
Default value : `false`
Enables fullscreen mode, automatically setting width to 98vw and height to 97vh.

isHandleCloseOnAccept
Type : `boolean`
Default value : `false`
Prevents automatic dialog closure when accept button is clicked. When true, developer must manually handle closure via the accept event.

isHandleCloseOnClickOutside
Type : `boolean`
Default value : `false`
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
Type : `boolean`
Default value : `false`
Prevents automatic dialog closure when close (X) button is clicked. When true, developer must manually handle closure via the dialogClose event.

isHandleCloseOnDismiss
Type : `boolean`
Default value : `false`
Prevents automatic dialog closure when dismiss button is clicked. When true, developer must manually handle closure via the dismiss event.

isHandleCloseOnEscape
Type : `boolean`
Default value : `false`
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
Type : `boolean`
Default value : `false`
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
Type : `string`
Title text displayed in the dialog header. When changed after dialog is opened, the title updates dynamically.

verticalPosition
Type : `EuiDialogVerticalPosition`
Vertical alignment position of the dialog within the viewport. Controls whether the dialog appears at top, center, or bottom of the screen.

width
Type : `string`
Default value : `'50%'`
Width of the dialog. Accepts CSS units (px, %, vw, etc.). Overridden to '98vw' when isFullScreen is true.

### Outputs

accept
Type : `EventEmitter`
Emitted when the accept button is clicked. Dialog closes automatically unless isHandleCloseOnAccept is true.

clickOutside
Type : `EventEmitter`
Emitted when user clicks outside the dialog boundaries. Fires regardless of hasClosedOnClickOutside setting.

dialogClose
Type : `EventEmitter`
Emitted when the close (X) button is clicked. Dialog closes automatically unless isHandleCloseOnClose is true.

dialogOpen
Type : `EventEmitter`
Emitted immediately after the dialog opens and becomes visible.

dismiss
Type : `EventEmitter`
Emitted when the dismiss button is clicked. Dialog closes automatically unless isHandleCloseOnDismiss is true.

escape
Type : `EventEmitter`
Emitted when user presses the Escape key while dialog has focus. Fires regardless of hasClosedOnEscape setting.

### Methods

Public closeDialog
`closeDialog()`
Close a Dialog Returns : `void`

Public disableAcceptButton
`disableAcceptButton()`
Disable Accept button of default eui-dialog footer. Returns : `void`

Public disableDismissButton
`disableDismissButton()`
Disable Dismiss button of default eui-dialog footer. Returns : `void`

Public enableAcceptButton
`enableAcceptButton()`
Enable Accept button of default eui-dialog footer. Returns : `void`

Public enableDismissButton
`enableDismissButton()`
Enable Dismiss button of default eui-dialog footer. Returns : `void`

Public openDialog
`openDialog()`

Type parameters :

- HC
- HCC
- BC
- BCC
- FC
- FCC

Open a dialog. Returns : `OpenedDialog` A dialog object of type `OpenedDialog`

Public scrollToBottom
`scrollToBottom()`
Scroll to the bottom of the content Returns : `void`

Public scrollToTop
`scrollToTop()`
Scroll to the top of the content Returns : `void`

### Properties

baseStatesDirective
Type : `unknown`
Default value : `inject(BaseStatesDirective)`

Public content
Type : `string | TemplatePortal`

euiDialogFooterDirective
Type : `QueryList<EuiDialogFooterDirective>`
Decorators : `@ContentChild(undefined)`

euiDialogHeaderDirective
Type : `QueryList<EuiDialogHeaderDirective>`
Decorators : `@ContentChild(undefined)`

Public isOpen$
Type : `BehaviorSubject<boolean>`
Default value : `new BehaviorSubject<boolean>(false)`

templateRefContent
Type : `TemplateRef<ElementRef>`
Decorators : `@ViewChild('templateRefContent')`

templateRefFooter
Type : `TemplateRef<EuiDialogFooterDirective>`
Decorators : `@ViewChild('templateRefFooter')`

templateRefHeader
Type : `TemplateRef<EuiDialogHeaderDirective>`
Decorators : `@ViewChild('templateRefHeader')`

### Accessors

isOpen
get `isOpen()`

Whether the eui-dialog is open.

Example :

    <eui-dialog #dialog>
         \@if (dialog.isOpen) {
             <my-component></my-component>
         }
    </eui-dialog>

Returns : `boolean`

# results matching ""

# No results matching ""