---
id: Modal
section: components
cssPrefix: pf-c-modal-box
propComponents: ['Modal']
ouia: true
---

import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';

## Examples

### Basic

```ts file="./ModalBasic.tsx"
```

### With description

```ts file="./ModalWithDescription.tsx"
```

### Top aligned

```ts file="./ModalTopAligned.tsx"
```

### Small

```ts file="./ModalSmall.tsx"
```

### Medium

```ts file="./ModalMedium.tsx"
```

### Large

```ts file="./ModalLarge.tsx"
```

### Custom width

```ts file="./ModalCustomWidth.tsx"
```

### Custom header and footer

```ts file="./ModalCustomHeaderFooter.tsx"
```

### No header or footer

```ts file="./ModalNoHeaderFooter.tsx"
```

### Title icon

```ts file="./ModalTitleIcon.tsx"
```

### Custom title icon

```ts file="./ModalCustomTitleIcon.tsx"
```

### With wizard

```ts file="./ModalWithWizard.tsx"
```

### With dropdown

```ts file="./ModalWithDropdown.tsx"
```

### With help

```ts file="./ModalWithHelp.tsx"
```

### With form

```ts file="ModalWithForm.tsx"
```

### With overflowing content

If the content that you're passing to the modal is likely to overflow the modal content area, pass `tabIndex={0}` to the modal to enable keyboard accessible scrolling.

```ts file="ModalWithOverflowingContent.tsx"
```