Info

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

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 :

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

getisOpen()

Whether the eui-dialog is open.

Example :

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

Returns : boolean

File

Description

Using Dialog Service

Template Reference

Custom Header and Footer

Accessibility

Notes

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Accessors

Inputs

Outputs

Methods

Properties

Accessors

results matching ""

No results matching ""