enact logoEnact
Edit on GitHub

moonstone/Dialog

Moonstone styled modal dialog components.

import Dialog from '@enact/moonstone/Dialog';

Members

DialogComponent

A modal dialog component, ready to use in Moonstone applications.

Dialog may be used to interrupt a workflow to receive feedback from the user. The dialong consists of a title, a subtitle, a message, and an area for additional buttons.

Usage:

<Dialog
  open={this.state.open}
  showCloseButton
  title="An Important Dialog"
  titleBelow="Some important context to share about the purpose"
>
  <BodyText>You can include other Moonstone components here. </BodyText>
  <buttons>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </buttons>
</Dialog>
import Dialog from '@enact/moonstone/Dialog';

DialogBaseComponent

A modal dialog component.

This component is most often not used directly but may be composed within another component as it is within Dialog.

import {DialogBase} from '@enact/moonstone/Dialog';
Properties
buttons
ElementArrayElement

Buttons to be included within the header of the component.

Typically, these buttons would be used to close or take action on the dialog.

children
Node

The contents of the body of the component.

noAnimation
Boolean

Disables animating the dialog on or off screen.

Default: false
noDivider
Boolean

Omits the dividing line between the header and body of the component.

Default: false
onClose
Function

Called when the user requests to close the dialog.

These actions include pressing the cancel key or tapping on the close button. It is the responsibility of the callback to set the open property to false.

onHide
Function

Called after the transition to hide the dialog has finished.

open
Boolean

Opens the dialog.

Default: false
scrimType
String

The types of scrim shown behind the dialog.

Allowed values include:

  • 'transparent' - The scrim is invisible but prevents pointer events for components below it.

  • 'translucent' - The scrim is visible and both obscures and prevents pointer events for components below it.

  • 'none' - No scrim is present and pointer events are allowed outside the dialog.

Default: 'translucent'
showCloseButton
Boolean

Shows the close button within the component.

Default: false
title
String

The primary text displayed within the header

titleBelow
String

The secondary text displayed below the title within the header.

Will not display if title is not set.

ArrayBooleanFunctionModuleNumberObjectString