Documentation
Documentation Hub

Small tier

Modals can have different sizes. Use the size prop to change the size of the modal. This example uses the sm and md size.

Show code
vue

Medium tier

Modals can have different sizes. Use the size prop to change the size of the modal. This example uses the lg and xl size.

Show code
vue

Large tier

Modals can have different sizes. Use the size prop to change the size of the modal. This example uses the 2xl and 3xl size.

Show code
vue

Footer align

Modals footers can be aligned to the left, right or center. Use the footer-align prop to change the alignment of the footer.

Show code
vue

#<TairoModal>

•Properties

classes
Show example
vue
footer-align
The alignment of the footer content.
Show example
vue
open
Whether the modal is open.
Show example
vue
rounded
The radius of the modal.
Show example
vue
size
The size of the modal.
Show example
vue

•Properties (with app.config)

as
The HTML tag to use as modal wrapper (e.g. `div`, `form`, etc.).
Show example
vue

•Events

@close
This events receive no value
Show example
vue

•Slots

#header
This slot has no inherted props
Show example
vue
#default
This slot has no inherted props
Show example
vue
#footer
This slot has no inherted props
Show example
vue

•Exposed

as
The HTML tag to use as modal wrapper (e.g. `div`, `form`, etc.).
Show example
vue