Modal

Design guidelines

Usage

Principles

When to use

Anatomy

Modal box and scrim

Title

Buttons

Side-by-side buttons (recommended)

Stacked or full-width buttons

Behavior

Position

Scrolling

Dismissing modals

Development guidelines

Usage

Props

`aria.describedby`: `string`

`aria.labelledby`: `string`

`bodyOpenClassName`: `string`

`className`: `string`

`contentLabel`: `string`

`focusOnMount`: `boolean | 'firstElement'` | 'firstContentElement'

headerActions

`isDismissible`: `boolean`

`isFullScreen`: `boolean`

`size`: `'small' | 'medium' | 'large' | 'fill'`

`onRequestClose`:

`overlayClassName`: `string`

`role`: `AriaRole`

`shouldCloseOnClickOutside`: `boolean`

`shouldCloseOnEsc`: `boolean`

`style`: `CSSProperties`

`title`: `string`

`experimentalHideHeader`: `boolean`

Related components