Dialog

Skip to page content

Show navigation section

Component demo

Interactive example

Launch dialog

Web component

React

Show full code

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialogid="default-dialog"heading="Are you sure?"label="Coffee order">
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch dialog</IcButton>
<IcDialog
heading="Are you sure?"
label="Coffee order"
open={openDialog}
// Set state to false if dismiss button is clicked
onIcDialogClosed={openDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want
    to continue?
</IcTypography>
</IcDialog>

Dialog details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property alertHeading Attribute alert-heading	This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a heading instead.
Property alertMessage Attribute alert-message	This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a message instead.
Property buttonProps	Sets the label and onclick functions for default buttons. type: { label: string; onclick: string }[] - { label: string; onclick: string; }[]	[ { label: "Cancel", onclick: "this.cancelDialog();", }, { label: "Confirm", onclick: "this.confirmDialog();" }, ]
Property buttons Attribute buttons	If set to`false` , dialog controls will not be displayed overriding buttonProps or slotted dialog controls. type: boolean	true
Property closeOnBackdropClick Attribute close-on-backdrop-click	If set to`false` , the dialog will not close when the backdrop is clicked. type: boolean	true
Property destructive Attribute destructive	If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button. type: boolean	false
Property disableHeightConstraint Attribute disable-height-constraint	If set to`true` , the content area max height and overflow properties are removed allowing the dialog to stretch below the fold. This prop also prevents popover elements from being cut off within the content area. type: boolean	false
Property disableWidthConstraint Attribute disable-width-constraint	If set to`true` , the content area width property is removed, allowing content to take the full width of the dialog when using the large variant. type: boolean	false
Property dismissLabel Attribute dismiss-label	Sets the dismiss label tooltip and aria label. type: string	"Dismiss"
Property heading Attribute heading	Sets the heading for the dialog. type: string
Property hideCloseButton Attribute hide-close-button	If`true` , the close button will not be displayed. type: boolean	false
Property label Attribute label	Sets the optional label for the dialog which appears above the heading. type: string
Property open Attribute open	If`true` , the dialog will be displayed. type: boolean	undefined
Property size Attribute size	Sets the maximum and minimum height and width for the dialog. type: "small" \| "medium" \| "large" - "large" \| "medium" \| "small"	"small"
Property status Attribute status	This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a variant instead.

Property

alertHeading

Attribute

alert-heading

This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a heading instead.

Property

alertMessage

Attribute

alert-message

This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a message instead.

Property

buttonProps

Sets the label and onclick functions for default buttons.

type: { label: string; onclick: string }[] - { label: string; onclick: string; }[]

Default: [ { label: "Cancel", onclick: "this.cancelDialog();", }, { label: "Confirm", onclick: "this.confirmDialog();" }, ]

Property

buttons

Attribute

buttons

If set tofalse , dialog controls will not be displayed overriding buttonProps or slotted dialog controls.

type: boolean

Default: true

Property

closeOnBackdropClick

Attribute

close-on-backdrop-click

If set tofalse , the dialog will not close when the backdrop is clicked.

type: boolean

Default: true

Property

destructive

Attribute

destructive

If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.

type: boolean

Default: false

Property

disableHeightConstraint

Attribute

disable-height-constraint

If set totrue , the content area max height and overflow properties are removed allowing the dialog to stretch below the fold. This prop also prevents popover elements from being cut off within the content area.

type: boolean

Default: false

Property

disableWidthConstraint

Attribute

disable-width-constraint

If set totrue , the content area width property is removed, allowing content to take the full width of the dialog when using the large variant.

type: boolean

Default: false

Property

dismissLabel

Attribute

dismiss-label

Sets the dismiss label tooltip and aria label.

type: string

Default: "Dismiss"

Property

heading

Attribute

heading

Sets the heading for the dialog.

type: string

Property

hideCloseButton

Attribute

hide-close-button

Iftrue , the close button will not be displayed.

type: boolean

Default: false

Property

label

Attribute

label

Sets the optional label for the dialog which appears above the heading.

type: string

Property

open

Attribute

open

Iftrue , the dialog will be displayed.

type: boolean

Default: undefined

Property

size

Attribute

size

Sets the maximum and minimum height and width for the dialog.

type: "small" | "medium" | "large" - "large" | "medium" | "small"

Default: "small"

Property

status

Attribute

status

This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a variant instead.

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot alert	Content will be placed at the top of the content area of the dialog.
Slot dialog-controls	Content will be place at the bottom of the dialog.
Slot heading	Content will be placed at the top of the dialog.
Slot label	Content will be placed above the dialog heading.

CSS Custom Properties

Name	Description
--ic-z-index-dialog	z-index of dialog

--ic-z-index-dialog z-index of dialog

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icDialogCancelled React onIcDialogCancelled	Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.	void
Web component icDialogClosed React onIcDialogClosed	Emitted when dialog has closed.	void
Web component icDialogConfirmed React onIcDialogConfirmed	Confirmation event emitted when default 'Confirm' primary button clicked or 'confirmDialog' method is called.	void
Web component icDialogOpened React onIcDialogOpened	Emitted when dialog has opened.	void

Web component

icDialogCancelled

React

onIcDialogCancelled

Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.

void

Web component

icDialogClosed

React

onIcDialogClosed

Emitted when dialog has closed.

void

Web component

icDialogConfirmed

React

onIcDialogConfirmed

Confirmation event emitted when default 'Confirm' primary button clicked or 'confirmDialog' method is called.

void

Web component

icDialogOpened

React

onIcDialogOpened

Emitted when dialog has opened.

void

Methods

Name	Description	Signature
Method cancelDialog	Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.	cancelDialog() => Promise<void>
Method confirmDialog	Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.	confirmDialog() => Promise<void>
Method hideDialog	This method should not be used anymore. Use open prop to set dialog visibility.	hideDialog() => Promise<void>
Method showDialog	This method should not be used anymore. Use open prop to set dialog visibility.	showDialog() => Promise<void>

Method

cancelDialog

Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.

cancelDialog() => Promise<void>

Method

confirmDialog

Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.

confirmDialog() => Promise<void>

Method

hideDialog

This method should not be used anymore. Use open prop to set dialog visibility.

hideDialog() => Promise<void>

Method

showDialog

This method should not be used anymore. Use open prop to set dialog visibility.

showDialog() => Promise<void>

Variants

Sizes

Interactive example

Launch sizes dialog

Web component

React

Show full code

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialogid="size-dialog"heading="Are you sure?"label="Coffee order">
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch sizes dialog</IcButton>
<IcDialog
size="large"// "small" | "medium" | "large"
open={openDialog}
label="Coffee order"
heading="Are you sure?"
onIcDialogClosed={openDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want to
    continue?
</IcTypography>
</IcDialog>

With status alerts

Interactive example

Launch dialog

Web component

React

Show full code

<ic-buttononclick="showDialog('#status-dialog')">Launch status dialog</ic-button>
<ic-dialog
id="status-dialog"
heading="Are you sure?"
label="Coffee order"
size="medium"
>
<ic-alert
slot="alert"
heading="They're both good"
message="Some say tea is just as good as coffee."
variant="neutral"
title-above="true"
>
</ic-alert>
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
</ic-dialog>

<IcButton
variant="primary"
onClick={handleDialogOpen}
>
  Launch status dialog
</IcButton>
<IcDialog
open={openDialog}
heading="Are you sure?"
label="Coffee order"
onIcDialogClosed={openDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
size="medium"
>
<IcAlert
slot="alert"
heading="They're both good"
message="Some say tea is just as good as coffee."
variant="neutral"// "neutral" | "info" | "warn" | "error" | "success" 
titleAbove
/>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want
    to continue?
</IcTypography>
</IcDialog>

Button variations

Interactive example

Launch no button dialog

Launch single button dialog

Launch three button dialog

Launch destructive button dialog

Web component

React

Show full code

<ic-buttononclick="showDialog('#no-button-dialog')">Launch no button dialog</ic-button>
<ic-buttononclick="showDialog('#single-button-dialog')">Launch single button dialog</ic-button>
<ic-buttononclick="showDialog('#three-buttons-dialog')">Launch three button dialog</ic-button>
<ic-buttononclick="showDialog('#destructive-dialog')">Launch destructive button dialog</ic-button>
<ic-dialog
id="no-button-dialog"
buttons="false"
label="None"
heading="This dialog has no default buttons"
>
  Sorry, you cannot place orders at the moment. Please try again later.
</ic-dialog>
<ic-dialogid="single-button-dialog"label="Single"heading="This dialog has a single button">
<ic-typography>
    Your order for an Americano coffee has been placed.
</ic-typography>
</ic-dialog>
<ic-dialogid="three-buttons-dialog"label="Three buttons"heading="This dialog has three default buttons">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</ic-dialog>
<ic-dialog
id="destructive-dialog"
destructive="true"
label="Destructive"
heading="This dialog has a default destructive button"
>
<ic-typography>
    You are about to cancel your order for an Americano. Are you sure you want to continue?
</ic-typography>
</ic-dialog>

<divclassName={classes.btnContainer}>
<IcButtononClick={handleNoButtonDialogOpen}>
    Launch no button dialog
</IcButton>
<IcButtononClick={handleSingleButtonDialogOpen}>
    Launch single button dialog
</IcButton>
<IcButtononClick={handleThreeButtonsDialogOpen}>
    Launch three button dialog
</IcButton>
<IcButtononClick={handleDestructiveButtonDialogOpen}>
    Launch destructive button dialog
</IcButton>
</div>
<IcDialog
open={openNoButtonDialog}
buttons={false}
label="None"
heading="This dialog has no default buttons"
onIcDialogClosed={openNoButtonDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</IcTypography>
</IcDialog>
<IcDialog
open={openSingleButtonDialog}
label="Single"
heading="This dialog has a single button"
buttonProps={[
{ label:"Confirm", onclick:"alert('Confirmed'); this.hideDialog()"},
]}
onIcDialogClosed={openSingleButtonDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</IcTypography>
</IcDialog>
<IcDialog
open={openThreeButtonsDialog}
label="Triple"
heading="This dialog has three default buttons"
buttonProps={[
{ label:"Close", onclick:"this.hideDialog()"},
{ label:"Options", onclick:"alert('Options...')"},
{ label:"Confirm", onclick:"alert('Confirmed'); this.hideDialog()"},
]}
onIcDialogClosed={openThreeButtonsDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</IcTypography>
</IcDialog>
<IcDialog
open={openDestructiveButtonDialog}
destructive
label="Destructive"
heading="This dialog has a default destructive button"
buttonProps={[
{ label:"Confirm", onclick:"alert('Confirmed'); this.hideDialog()"},
]}
onIcDialogClosed={openDestructiveButtonDialog && handleDialogClose}
onIcDialogConfirmed={handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</IcTypography>
</IcDialog>

Slotted buttons

Interactive example

Launch dialog

Web component

React

Show full code

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialogid="slotted-dialog"heading="Are you sure?"label="Coffee order">
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
<ic-buttonslot="dialog-controls"variant="secondary"onclick="hideDialog()">
    Go back
</ic-button>
<ic-buttonslot="dialog-controls"onclick="addToBasket()">
    Add to basket
</ic-button>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch slotted buttons dialog</IcButton>
<IcDialog
heading="Are you sure?"
label="Coffee order"
open={openDialog}
onIcDialogClosed={openDialog && handleDialogClose}
>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want
    to continue?
</IcTypography>
<IcButtonslot="dialog-controls"variant="secondary"onClick={handleDialogClose}>
    Go back
</IcButton>
<IcButtonslot="dialog-controls"onClick={handleAddToBasket}>
    Add to basket
</IcButton>
</IcDialog>

Interactive content

Interactive example

Launch dialog

Web component

React

Show full code

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialog
id="interactive-content-dialog"
label="Coffee order"
heading="Please agree to our terms and conditions"
>
<ic-typography>
    Before continuing, please agree to our terms and conditions.
</ic-typography>
<ic-checkbox-group
name="terms"
label="terms and conditions"
hide-label="true"
>
<ic-checkboxlabel="I agree to the terms and conditions."value="agree"></ic-checkbox>
</ic-checkbox-group>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch dialog</IcButton>
<IcDialog
open={openDialog}
label="Coffee order"
heading="Please agree to our terms and conditions"
onIcDialogClosed={openDialog && handleDialogClose}
onIcDialogConfirmed={termsDialogConfirmed}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Before continuing, please agree to our terms and conditions.
</IcTypography>
<IcCheckboxGroup
name="terms"
label="terms and conditions"
hideLabel
onIcChange={toggleTermsAgreed}
className={classes.checkboxGroup}
>
<IcCheckbox
label="I agree to the terms and conditions."
value="agree"
/>
</IcCheckboxGroup>
</IcDialog>

Background close prevented

Interactive example

Launch dialog

Web component

React

Show full code

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialog
id="no-close-dialog"
close-on-backdrop-click="false"
label="Background close prevented"
heading="This dialog can't be closed by clicking the background"
>
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch dialog</IcButton>
<IcDialog
open={openDialog}
closeOnBackdropClick={false}
label="Background close prevented"
heading="This dialog can't be closed by clicking the background"
onIcDialogClosed={openDialog && handleDialogClose}
onIcDialogConfirmed={handleConfirmDialog}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</IcTypography>
</IcDialog>

Events

Interactive example

Launch dialog

Web component

React

Show full code

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialogid="ev-dialog"heading="Are you sure?"label="Coffee order">
<ic-typography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</ic-typography>
<ic-buttonvariant="tertiary"onclick="cancelDialog()"slot="dialog-controls">
    Cancel
</ic-button>
<ic-buttononclick="confirmDialog()"slot="dialog-controls">
    Confirm
</ic-button>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch dialog</IcButton>
<IcDialog
open={openDialog}
heading="This dialog utilises events"
label="Events"
onIcDialogOpened={handleDialogOpened}
onIcDialogConfirmed={handleDialogConfirmed}
onIcDialogCancelled={handleDialogCancelled}
onIcDialogClosed={handleDialogClosed}
>
<IcTypography>
    You are about to add 'Americano' to your basket. Are you sure you want to continue?
</IcTypography>
<IcButtonvariant="tertiary"onClick={handleSlottedCancel}slot="dialog-controls">
    Cancel
</IcButton>
<IcButtononClick={handleSlottedConfirm}slot="dialog-controls">
    Confirm
</IcButton>
</IcDialog>

Disabled height constraint

Interactive example

Launch disabled height constraint dialog

Web component

React

Show full code

<ic-buttononclick='showDialog()'>Launch disabled height constraint dialog</ic-button>
<ic-dialog
label='Coffee order'
heading='Please add your milk?'
disable-height-constraint='true'
>
<ic-typography>Sure, let's dive into the delightful world of milk, where dairy dreams and coffee collide in the harmonious dance of a flat white. Picture this: you stroll into your favorite coffee haunt, the aroma of freshly ground beans tickling your senses. You approach the counter, ready to make a crucial decision – what kind of milk will accompany your flat white?</ic-typography><br/>
<ic-typography>In the end, whether you go for the classic, embrace the trendy, or opt for the exotic, the flat white remains a canvas waiting to be painted with your milk of choice. So, next time you're at the coffee counter, let your taste buds embark on a journey – a journey where milk and coffee meet, and every sip tells a story, sprinkled with a dash of humor and a whole lot of flavor. Cheers to the caffeinated adventure!</ic-typography><br/>
<ic-selectlabel='Please select a type of milk'></ic-select>
</ic-dialog>

<IcButtononClick={handleDialogOpen}>Launch disabled height constraint dialog</IcButton>
<IcDialog
label='Coffee order'
heading="Please add your milk"
disableHeightConstraint
open={openDialog}
onIcDialogConfirmed={openDialog && handleDialogClose}
onIcDialogCancelled={handleDialogClose}
>
<IcTypography>
    Sure, let's dive into the delightful world of milk, where dairy dreams
    and coffee collide in the harmonious dance of a flat white. Picture
    this: you stroll into your favorite coffee haunt, the aroma of freshly
    ground beans tickling your senses. You approach the counter, ready to
    make a crucial decision – what kind of milk will accompany your flat
    white?
</IcTypography>
<br/>
<IcTypography>
    In the end, whether you go for the classic, embrace the trendy, or opt
    for the exotic, the flat white remains a canvas waiting to be painted
    with your milk of choice. So, next time you're at the coffee counter,
    let your taste buds embark on a journey – a journey where milk and
    coffee meet, and every sip tells a story, sprinkled with a dash of
    humor and a whole lot of flavor. Cheers to the caffeinated adventure!
</IcTypography>
<br/>
<IcSelect
label='Select a type of milk'
options={[
{ value:'whole', label:'Whole'},
{ value:'semiskinned', label:'Semi Skinned'},
{ value:'oat', label:'Oat'},
{ value:'almond', label:'Almond'}
]}
/>
</IcDialog>

Last reviewed 31 May 2024 .