Overview

Purpose

The Modal is a component that appears on top of the main content, grabbing the user’s full attention. It can either span the whole viewport, or sit on top of a semi-transparent background.

Anatomy

The Modal component can be broken down into the following elements -

1. Modal container
   The elements of a Modal sit within this container.

2. Icon Button
   Icon Button to close the Modal.

3. Placeholder
   Space to put an existing or locally created component.

Variants & States

• Full screen: yes/no
  
• Padding: on/off