Balance Logo
Balance
Reckon Design System
Open playroom

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 @balance-web/modal-dialog
Import usage
import {
AlertDialog,
BlankDialog,
ContentDialog,
InfoDialog,
FormDialog,
PassiveDialog,
useDialogPrinter
} from '@balance-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.

size

AlertDialog can have three sizes: small medium large

Edit in Playroom

Acknowledgment

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

Confirmation

Confirmation dialogs are used to confirm significant 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.

The title should in most cases be phrased as a short binary dichotomous question, so that the action is easy and clear to make. Read this UX article for more copywriting direction and tips.

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.

size

InfoDialog can have three sizes: small medium large

Form Dialog

Use form dialogs for supporting tasks that require a handle full of fields to be filled out.

Note: Do not put large forms inside a form dialog. Use side drawer or bottom drawer instead.

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.

Note: Do not put forms inside content dialog. Use form dialog instead.

size

ContentDialog can have three sizes: small medium large

Sections

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

Overflow

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

Passive Dialog

Passive dialog is used when you want to block the screen while a critical process is happening in the background that shoud not be interrupted such as saving a long list of items or a payment operation.

A passive dialog cannot be closed by the user, it must be close programatically after the background process is complete.

size

PassiveDialog can have three sizes: small medium large

Blank Dialog

Has no opinions about content, render whatever you need as children.

Note: This should be used in exceptional cases. Consider using one of the other dialogs before reaching for a blank dialog.

Printing a dialog

useDialogPriner can be used to create a printer friendly version of a dialog's content.

It will copy all the styles from the current window, create a new window which will be contain the dialog's contents as scrollable.

This technique works most of the times, if you need to do specific printer friendly modifications before printing, feel free to copy the technique used in this hook.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo