Modals

Default modal

A default modal opened using the default trigger component.

Modal 1 (default trigger)

A custom trigger button for the same default modal.

Modal 1 (custom trigger)

You have complete control of the modal content - you can even add forms.

Modal with a Form

If you need a lot of content in a modal, the y-overflow will automatically appear.

Modal with lots of Content

Options

Manually disabled "esc-to-close" and "backdrop-click"

Modal 2

Force the user to take an action by setting the "force-action" attribute. This option also hides the close "x" icon

Modal 3

Sizes

Small Modal Medium Modal Large Modal

Alert Modals

We also have an "alert" modal style. All of the same options are available to you.

Alert modal