Modal

A modal is an overlay element which blocks interaction with elements outside it.

Installation

CLI

Copy & Paste

bash

npx @sly-cli/sly add draft-ui modal

Examples

Default

The default Modal uses size md.

Example

Code

Sizes

You can use the size prop to alter the button size. Sizes xs, sm, md, lg, xl, and full are included by default.

Example

Code

Set Autofocus

You can manually control which element recieves focus when the Modal opens by setting autoFocus on a focusable element.

Example

Code

Dismissable

Modals are dismissable by clicking outside by default or by pressing the Esc key. To prevent this, set isDismissable to false and/or isKeyboardDismissDisabled to true.

Example

Code