Logo

AueraUI

Docs

Components

Components

Modal

A pop-up dialog for displaying content or actions in a focused overlay.

Logo

Form Modal

Sizes

The Modal comes in seven different sizes. Use the size prop on ModalPanel to adjust its dimensions.

Placement

You can control where the modal appears on the screen using the placement prop. This allows positioning the modal at the center, top, bottom.

Radius

The radius property defines the border-radius of modals, allowing for smooth and rounded corners.

Transitions

Modals support different transition effects for smooth animations with the transition prop you can choose your preferred effect.

Implementation Reference

Each modal is defined in its own file. Below are links to their respective implementations:

Note: Ensure that the `value` used in the `<Modal />` component matches the one used in `openModal` or `ModalTrigger`.

size

Type:

"auto" | "sm" | "md" | "lg" | "xl" | "full" | "full-screen"

Size of the Panel

Default:

auto
radius

Type:

"md" | "lg" | "xl" | "2xl" | "3xl"

Shape of the Panel

Default:

md
className

Type:

string

Optional string to add custom CSS classes.

Default:

underfined
mode

Type:

"light" | "dark"

A shared theme mode across other modal component ('Header','Footer')

Default:

system
placement

Type:

"top" | "center" | "bottom"

Defines the vertical position of the modal on the screen.

Default:

center
transition

Type:

"walkIn" | "dropIn" | "slideIn"

Specifies the animation style used when the modal appears on the screen.

Default:

walkIn
showBorder

Type:

boolean

Adds border-bottom to the component.

Default:

true

ModalContent

centerContent

Type:

boolean

Centers all it content

Default:

false
showBorder

Type:

boolean

Adds border-top to the component.

Default:

true
position

Type:

"right" | "left"

Specifies the alignment of the footer content.

Default:

right