Confirm modal

Use the EuiConfirmModal to ask the user to confirm a decision. It is a contextual wrapper around EuiModal that provides some helpful props for filling in common modal pieces. By default, the button color indicates a positive or neutral action. Change the

buttonColor property to danger to indicate a destructive action.

Loading...

Loading and disabling confirm button

EuiConfirmModal supports being able to apply loading and disabled states to the confirm button with the confirmButtonDisabled and isLoading props respectively. This is helpful to indicate the fetching of data and/or to wait for a user's input before enabling the confirm action.

Loading...

Props

EuiConfirmModal

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop onCancel# ↦	Description and type Type: (event?: any) => void ↦	Default value Required ↵
Prop children# ↦	Description and type ReactNode to render as this component's content Type: ReactNode ↦	Default value ↵
Prop title# ↦	Description and type Type: ReactNode ↦	Default value ↵
Prop titleProps# ↦	Description and type Type: Omit<EuiTitleProps, "children"> & HTMLAttributes<HTMLHeadingElement> & { component?: ElementType; } ↦	Default value ↵
Prop cancelButtonText# ↦	Description and type Type: ReactNode ↦	Default value ↵
Prop confirmButtonText# ↦	Description and type Type: ReactNode ↦	Default value ↵
Prop onConfirm# ↦	Description and type Type: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void ↦	Default value ↵
Prop confirmButtonDisabled# ↦	Description and type Type: boolean ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop defaultFocusedButton# ↦	Description and type Allows focusing either the confirm or cancel button on modal initialization. Will take precedence over initialFocus, if initialFocus is passed. Type: "cancel" | "confirm" ↦	Default value ↵
Prop buttonColor# ↦	Description and type Type: "primary" | "text" | "accent" | "accentSecondary" | "success" | "warning" | "danger" ↦	Default value primary ↵
Prop maxWidth# ↦	Description and type Sets the max-width of the modal. Set to true to use the default (euiBreakpoints 'm'), set to false to not restrict the width, set to a number for a custom width in px, set to a string for a custom width in custom measurement. Type: string | number | boolean ↦	Default value ↵
Prop isLoading# ↦	Description and type Passes isLoading prop to the confirm button Type: boolean ↦	Default value ↵
Prop role# ↦	Description and type Identifies a modal dialog to screen readers. Modal dialogs that confirm destructive actions or need a user's attention should use "alertdialog". Type: "dialog" | "alertdialog" ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop initialFocus# ↦	Description and type Specifies what element should initially have focus. Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. Type: string | HTMLElement | (() => HTMLElement) ↦	Default value ↵

𐘂𐘂