---
title: "Modal"
canonical: https://sky-ui.cf.sky.com/components/modal
---

# Modal

The Modal is a component that appears on top of the main content.

## 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**<br/>The elements of a Modal sit within this container.

2. **Icon Button**<br/>Icon Button to close the Modal.

3. **Placeholder**<br/>Space to put an existing or locally created component.

## Variants & States

- Full screen: yes/no<br/>
- Padding: on/off