Modal

A dialog with a title, a scrollable body, and a footer.

When to use

Use Modal when you need a dialog with a title, a scrollable body, and a footer.

Import

TypeScript

import { Modal } from '@gzodo/ui'

Modal opens over a blurred overlay. The header shows the title, an esc tag, and a close button. The footer holds optional content on the left and a Close button plus footer actions on the right. Focus is trapped, and Escape or an overlay click calls onClose when isDismissable is true. The dialog fades and scales over 200ms.

Examples

Basic

Pass isOpen and onClose. footer sits beside the default Close button. width sets the dialog size.

Position

modalPosition is center, top, bottom, left, or right. Top keeps a 100px offset from the viewport edge.

Footer

isShowFooterCancel={false} removes the stock Close button. footerLeft and footer fill the two sides.

Modal

Property

Description

Type

Default

isOpen

Renders the dialog. Closing animates for 200ms before unmount.

boolean

—

onClose

Called from Close, Escape, the overlay, and the header button.

() => void

—

title

Header label. A string is muted text. A node is rendered as-is.

ReactNode

'title'

children

Scrollable body.

ReactNode

—

footer

Actions on the right of the footer, after Close.

ReactNode

—

footerLeft

Content on the left of the footer.

ReactNode

—

isShowFooterCancel

Show the secondary Close button.

boolean

true

modalPosition

Where the dialog sits inside the overlay.

'center' | 'top' | 'bottom' | 'left' | 'right'

'center'

isDismissable

Allow Escape and an overlay click to close.

boolean

true

width

Dialog width. A number is pixels.

string | number

—

height

Dialog and body height.

string | number

—

minWidth

Minimum dialog width.

string | number

—

maxWidth

Maximum dialog width.

string | number

—

minHeight

Minimum dialog height.

string | number

—

maxHeight

Maximum dialog height.

string | number

—

fullWidth

Stretch the dialog to the overlay width.

boolean

—

fullHeight

Stretch the dialog and the body to the overlay height.

boolean

—

padding

Padding of the body. Overrides the default 8px.

string | number

—

Badge

DataView