Skip to content

Components / Dialog


Dialogs inform users about critical information, require users to make decisions, or encapsulate multiple tasks within a discrete process. Use dialogs sparingly because they are interruptive in nature–their sudden appearance forces users to stop their current task and refocus on the dialog content. Not every choice, setting, or detail warrants such interruption and prominence.



  1. Container
  2. Title (optional)
  3. Header (optional)
  4. Close icon (optional)
  5. Content
  6. Button (optional)
  7. Overlay


The header should give the user a sense of what the dialog content will contain. Headers have a bottom border by default, but the border may be removed as needed.

Dialog headers typically contain the following elements:

  • Title
  • Close icon


The content area holds the main information that your dialog contains, such as text, form fields, or a gallery. Padding may be removed if your content contains a gallery or other components that do not require padding.


The overlay is an element that is created when a dialog is opened and destroyed when the dialog is closed.

Don't create multiple overlays. They will stack and make the background much darker.


Unless otherwise specified, dialogs will be aligned to the top of the viewport by default.

If the contents of the dialog grows larger than the viewport, much of the content will be cut off.


Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component


The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.

Sample Property Sample value

Dark text color used for primary content in layouts


Medium dark text color used for secondary or muted content in layouts



0 3px 12px 0 #00000026

Default fill for dividers in the app


Default card and list background

© 2021 Jack Henry & Associates, Inc. Trademark notice
Version 0.7.0. Last updated March 23, 2021.