Balance Logo
Balance
Reckon Design System

Modal Dialog

Modal dialogs focus the user’s attention exclusively on one task or piece of information via a window that sits in front of the page content.
Install
pnpm add @reckon-web/modal-dialog
Import usage
import {
AlertDialog,
ContentDialog,
InfoDialog
} from '@reckon-web/modal-dialog';
  • Code
  • API

Alert Dialog

Alert dialogs can be disruptive because they require users to take an action before returning to the application; they should be used thoughtfully and sparingly.

Acknowledgment

Acknowledgment dialogs are used when the system requires the user to acknowledge the presented information. It contains only a single action, commonly “Okay”.

Open in Playroom

Confirmation

You can use an alert dialog to confirm user decisions. Clearly describe the action being confirmed and explain any potential consequences that it may cause. Both the title and the button should reflect the action that will occur.

If the confirm action is asynchronous, you may also pass a loading property with the confirm action options to influence the button state.

Critical Confirmation

Critical confirmation dialogs describe destructive or irreversible actions. They are commonly used in situations where confirmation of an action would result in significant data loss if done accidentally.

Info Dialog

Use info dialogs to communicate impactful information at key moments:

  • Celebrate the success of a large task
  • Welcome a new user onboard
  • Inform users that their free trial has ended

You can use any of our Spot or Hero illustrations in the illustration prop.

Content Dialog

Content dialogs are commonly used for short and non-frequent tasks, such as editing or management tasks. If a user needs to repeatably preform a task, consider making the task do-able from the main page.

Sections

The content dialog is composed of three distinct zones: A header, the body, and a footer.

Sizes

The content dialog is available in three sizes:

  • small - text content or short forms
  • medium - use for medium to large forms
  • large - reserved for tables, and other data rich interfaces

Overflow

The content dialog will fill the available vertical space. When this happens the "body" section will become scrollable.

Composition

Compose other components together within the content modal to create sophisticated interfaces.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.