Dialog - Intelligence Community Design System

Skip to page content

Show navigation section

Component demo

Interactive example

Launch dialog

You are about to add 'Americano' to your basket. Are you sure you want to continue?

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 buttons Attribute buttons	If set to`false` , default buttons will not be shown, but slotted dialog controls will still be displayed. type: boolean - boolean \| undefined	true
Property closeOnBackdropClick Attribute close-on-backdrop-click	If set to`false` , the dialog will not close when the backdrop is clicked. type: boolean - boolean \| undefined	true
Property destructive Attribute destructive	If 'true', 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 - boolean \| undefined	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 - boolean \| undefined	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 - boolean \| undefined	false
Property dismissLabel Attribute dismiss-label	Sets the dismiss label tooltip and aria label. type: string - string \| undefined	"Dismiss"
Property heading Attribute heading	Sets the heading for the dialog. type: string - string \| undefined
Property hideCloseButton Attribute hide-close-button	If`true` , the close button will not be displayed. type: boolean - boolean \| undefined	false
Property label Attribute label	Sets the optional label for the dialog which appears above the heading. type: string - string \| undefined
Property open Attribute open	If`true` , the dialog will be displayed. type: boolean - boolean \| undefined	false
Property size Attribute size	Sets the maximum and minimum height and width for the dialog. type: "small" \| "medium" \| "large" - "large" \| "medium" \| "small" \| undefined	"small"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"

Property

buttons

Attribute

buttons

If set tofalse , default buttons will not be shown, but slotted dialog controls will still be displayed.

type: boolean - boolean | undefined

Default: true

Property

closeOnBackdropClick

Attribute

close-on-backdrop-click

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

type: boolean - boolean | undefined

Default: true

Property

destructive

Attribute

destructive

If 'true', 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 - boolean | undefined

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 - boolean | undefined

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 - boolean | undefined

Default: false

Property

dismissLabel

Attribute

dismiss-label

Sets the dismiss label tooltip and aria label.

type: string - string | undefined

Default: "Dismiss"

Property

heading

Attribute

heading

Sets the heading for the dialog.

type: string - string | undefined

Property

hideCloseButton

Attribute

hide-close-button

Iftrue , the close button will not be displayed.

type: boolean - boolean | undefined

Default: false

Property

label

Attribute

label

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

type: string - string | undefined

Property

open

Attribute

open

Iftrue , the dialog will be displayed.

type: boolean - boolean | undefined

Default: false

Property

size

Attribute

size

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

Default: "small"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

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

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>

Variants

Sizes

Interactive example

Launch sizes dialog

You are about to add 'Americano' to your basket. Are you sure you want to continue?

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

You are about to add 'Americano' to your basket. Are you sure you want to continue?

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>

Slotted buttons

Interactive example

Launch dialog

You are about to add 'Americano' to your basket. Are you sure you want to continue?

Go back

Add to basket

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

Before continuing, please agree to our terms and conditions.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

You are about to add 'Americano' to your basket. Are you sure you want to continue?

Cancel

Confirm

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

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?

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!

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>

Theme

Interactive example

Launch dialog

You are about to add 'Americano' to your basket. Are you sure you want to continue?

Web component

React

Show full code

<ic-buttononclick="showDialog()">Launch dialog</ic-button>
<ic-dialogid="default-dialog"heading="Are you sure?"label="Coffee order"theme="dark">
<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"
theme="dark"
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>

Last reviewed 31 May 2024 .