Dialog - Intelligence Community Design System

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 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 hideDefaultControls Attribute hide-default-controls	If set to`true` , default button controls will not be shown, but slotted dialog controls will still be displayed. type: boolean	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

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

hideDefaultControls

Attribute

hide-default-controls

If set totrue , default button controls will not be shown, but slotted dialog controls will still be displayed.

type: boolean

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

Cancellation 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