Live Demo

Anatomy

Img
  1. Content
  2. Elevation
  3. Background
  4. Close

Variation

The modal have two variations – centre modal and right modal.The centre modal is used in places where a action is require from the user, whereas right modal is used for configurations.

Size

Modal is available in three sizes — large, medium, and small.

Guidelines

  • Modals are disruptive and should be used sparingly.
  • Do not use for important error notifications, instead use Alert.
  • Do not use for short messaging confirming successful interactions such as "Email sent", instead use Alert or Toast.
  • Avoid using modals on top of modals.
Copyright© Workhall 2023. All Rights Reserved.