Modal

A Modal is window containing contextual information, tasks, or workflows that appear over the user interface. The content behind a modal dialog is inert, meaning that users cannot interact with it.

View source code

isOpen
```
boolean
```
Whether the modal should be open
title
```
string
```
The title of the Modal
actions
```
ReactNode
```
Actions to display in the Modal
children
```
ReactNode
```
The content of the Modal
className
```
string
```
className for the element

iconName

"adjustments-horizontal" | "archive" | "arrow-down-tray" | "arrow-down" | "arrow-left-right" | "arrow-left" | "arrow-merge" | "arrow-path" | "arrow-pointing-out" | "arrow-right-rectangle" | "arrow-right" | "arrow-split" | "arrow-top-right-square" | "arrow-turn-right" | "arrow-up-tray" | "arrow-up" | ... 143 more ...

The icon to display in the button

iconVariant

"alert" | "apricot" | "blue" | "carbon" | "emerald" | "forest" | "grolive" | "info" | "lemon" | "neutral" | "ocean" | "peach" | "pink" | "purple" | "success" | "warning"

Specifies the icon variant

Default: info

illustration
```
ReactNode
```
The illustration to display on top of the Modal
illustrationHeight
```
string
```
Specifies the illustration height
Default: 424px
noAnimation
```
boolean
```
Whether the modal should have opening and closing animation
Default: false
onClose
```
MouseEventHandler<HTMLButtonElement>
```
Handler that is called when the Modal is closed
portalContainer
```
Element
```
The element where to mount the Modal. It needs to be outside the GrapesProvider tree for the focus trap to work properly.
Default: document.body
subtitle
```
string
```
The subtitle of the Modal

ModalOverlay

isOpen
```
boolean
```
Whether the modal should be open
children
```
ReactNode
```
The content of the ModalOverlay
className
```
string
```
className for the element
noAnimation
```
boolean
```
Whether the modal should have opening and closing animation
Default: false
portalContainer
```
Element
```
The element where to mount the Modal. It needs to be outside the GrapesProvider tree for the focus trap to work properly.
Default: document.body
timeout
```
number
```
Time to wait before removing the element on exit. Used only when onAnimationEnd is not supported
Default: 200

ModalContent

children
```
ReactNode
```
The content of the Modal
className
```
string
```
className for the element
onClose
```
MouseEventHandler<HTMLButtonElement>
```
Handler that is called when the Modal is closed. If not provided, the Close button won't be displayed

ModalHeaderWithIcon

iconName

"adjustments-horizontal" | "archive" | "arrow-down-tray" | "arrow-down" | "arrow-left-right" | "arrow-left" | "arrow-merge" | "arrow-path" | "arrow-pointing-out" | "arrow-right-rectangle" | "arrow-right" | "arrow-split" | "arrow-top-right-square" | "arrow-turn-right" | "arrow-up-tray" | "arrow-up" | ... 143 more ...

The icon to display

title
```
string
```
The title of the Modal

iconVariant

"alert" | "apricot" | "blue" | "carbon" | "emerald" | "forest" | "grolive" | "info" | "lemon" | "neutral" | "ocean" | "peach" | "pink" | "purple" | "success" | "warning"

Specifies the icon variant

Default: info

subtitle
```
string
```
The Subtitle of the Modal
titleId
```
string
```
The title's unique identifier. Same identifier should be pass to ModalContent using aria-labelledby.

ModalHeaderWithIllustration

illustration
```
ReactNode
```
The illustration to display
title
```
string
```
The title of the Modal
illustrationHeight
```
string
```
Specifies the illustration height.
Default: 424px
subtitle
```
string
```
The Subtitle of the Modal
titleId
```
string
```
The title's unique identifier. Same identifier should be pass to ModalContent using aria-labelledby.

ModalBody

children
```
ReactNode
```
The modal's main content.
className
```
string
```
className for the element

ModalFooter

children
```
ReactNode
```
The modal actions

Modal

A Modal is window containing contextual information, tasks, or workflows that appear over the user interface. The content behind a modal dialog is inert, meaning that users cannot interact with it.

View source code

isOpen
```
boolean
```
Whether the modal should be open
title
```
string
```
The title of the Modal
actions
```
ReactNode
```
Actions to display in the Modal
children
```
ReactNode
```
The content of the Modal
className
```
string
```
className for the element

iconName

"adjustments-horizontal" | "archive" | "arrow-down-tray" | "arrow-down" | "arrow-left-right" | "arrow-left" | "arrow-merge" | "arrow-path" | "arrow-pointing-out" | "arrow-right-rectangle" | "arrow-right" | "arrow-split" | "arrow-top-right-square" | "arrow-turn-right" | "arrow-up-tray" | "arrow-up" | ... 143 more ...

The icon to display in the button

iconVariant

"alert" | "apricot" | "blue" | "carbon" | "emerald" | "forest" | "grolive" | "info" | "lemon" | "neutral" | "ocean" | "peach" | "pink" | "purple" | "success" | "warning"

Specifies the icon variant

Default: info

illustration
```
ReactNode
```
The illustration to display on top of the Modal
illustrationHeight
```
string
```
Specifies the illustration height
Default: 424px
noAnimation
```
boolean
```
Whether the modal should have opening and closing animation
Default: false
onClose
```
MouseEventHandler<HTMLButtonElement>
```
Handler that is called when the Modal is closed
portalContainer
```
Element
```
The element where to mount the Modal. It needs to be outside the GrapesProvider tree for the focus trap to work properly.
Default: document.body
subtitle
```
string
```
The subtitle of the Modal

ModalOverlay

isOpen
```
boolean
```
Whether the modal should be open
children
```
ReactNode
```
The content of the ModalOverlay
className
```
string
```
className for the element
noAnimation
```
boolean
```
Whether the modal should have opening and closing animation
Default: false
portalContainer
```
Element
```
The element where to mount the Modal. It needs to be outside the GrapesProvider tree for the focus trap to work properly.
Default: document.body
timeout
```
number
```
Time to wait before removing the element on exit. Used only when onAnimationEnd is not supported
Default: 200

ModalContent

children
```
ReactNode
```
The content of the Modal
className
```
string
```
className for the element
onClose
```
MouseEventHandler<HTMLButtonElement>
```
Handler that is called when the Modal is closed. If not provided, the Close button won't be displayed

ModalHeaderWithIcon

iconName

"adjustments-horizontal" | "archive" | "arrow-down-tray" | "arrow-down" | "arrow-left-right" | "arrow-left" | "arrow-merge" | "arrow-path" | "arrow-pointing-out" | "arrow-right-rectangle" | "arrow-right" | "arrow-split" | "arrow-top-right-square" | "arrow-turn-right" | "arrow-up-tray" | "arrow-up" | ... 143 more ...

The icon to display

title
```
string
```
The title of the Modal

iconVariant

"alert" | "apricot" | "blue" | "carbon" | "emerald" | "forest" | "grolive" | "info" | "lemon" | "neutral" | "ocean" | "peach" | "pink" | "purple" | "success" | "warning"

Specifies the icon variant

Default: info

subtitle
```
string
```
The Subtitle of the Modal
titleId
```
string
```
The title's unique identifier. Same identifier should be pass to ModalContent using aria-labelledby.

ModalHeaderWithIllustration

illustration
```
ReactNode
```
The illustration to display
title
```
string
```
The title of the Modal
illustrationHeight
```
string
```
Specifies the illustration height.
Default: 424px
subtitle
```
string
```
The Subtitle of the Modal
titleId
```
string
```
The title's unique identifier. Same identifier should be pass to ModalContent using aria-labelledby.

ModalBody

children
```
ReactNode
```
The modal's main content.
className
```
string
```
className for the element

ModalFooter

children
```
ReactNode
```
The modal actions