---
id: modal
title: Modal
---

# Modal

Modal is a dialog box/popup window which contains information or an action and it is displayed on top of the current page:

## How to use

### As a Dialog

<code src="@digigov/ui/src/app/Modal/__stories__/Default.tsx" />


### As an Alert Dialog

<code src="@digigov/ui/src/app/Modal/__stories__/AlertDialog.tsx" />

### With dense style

<code src="@digigov/ui/src/app/Modal/__stories__/Dense.tsx" />

## Accessibility

You can read more about the accessibility patterns used in our Modal
implementation in the ARIA Authoring Practices Guide (APG) at
[Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/) and
[Alert Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) sections.

## API

See below for a complete reference to all of the props  available to the components mentioned here.

<ComponentProps componentName={[
  "ModalContainer",
  "Modal",
  "ModalHeading",
  "ModalContent",
  "ModalAction"]} 
/>