---
name: Modal
route: /modal
menu: 🧰 Technical
---

import { Playground } from 'docz'
import {
  ModalExample1,
  ModalExample2,
  ModalExample3,
  ModalExample4,
} from '../src'

# Modal

You will have to check the Modal component for all the use cases and props

## Basic Usage

<Playground>
  <ModalExample1>I'm the Modal YEAH! Click Me to close Me</ModalExample1>
</Playground>

## Close with the Overlay

<Playground>
  <ModalExample2>
    I'm the Modal YEAH! Click Me (OR My Overlay!) to close Me
  </ModalExample2>
</Playground>

## No Overlay

<Playground>
  <ModalExample3>I'm Alone :)</ModalExample3>
</Playground>

## Customize your Modal

<Playground>
  <ModalExample4>Funky !</ModalExample4>
</Playground>