Balance Logo
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.
pnpm add @balance-web/modal-dialog
Import usage
import {
} 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.


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

Edit in Playroom


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.

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.


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


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


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


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

Blank Dialog

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

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