Modal API

API reference docs for the Stash Modal component. Learn about the props, CSS, and other APIs of this exported module.

Import

import Modal from '@leaflink/stash/Modal.vue';

Name	Type	Default	Description
closeButtonColorClass	string	`'tw-text-white/50'`	Add classes to the close button. This can be used with the hideHeader prop and featuredContent slot to accommodate images with different color backgrounds.
contrast	boolean	`false`	Gives the modal body have a light gray background
disableBodyPadding	boolean	`-`	Disables the default padding in the modal body.
hideClose	boolean	`false`	Hides the "close" button
hideHeader	boolean	`false`	Hide the header. Typically used with the featuredContent slot to display a graphic and create a "promo" modal.
isOpen	boolean	`false`	Opens the modal when truthy; hides the modal when falsy.
modelValue	boolean	`false`	Use v-model:is-open or :is-open instead of :model-value and v-model.
open	boolean	`false`	Opens the modal when truthy; hides the modal when falsy.
position	ModalPositions	`center`	The position on the screen to display the modal.
preventDismiss	boolean	`false`	Prevents the modal from being dismissed by clicking the backdrop or pressing the escape key. Example: There are in-flight api requests and you do not want the modal to close until they are done.
scrollable	boolean	`false`	Should the modal be scrollable within the content area. This prop is treated as `true` when the `position` prop is set to "left" or "right".
size	ModalSizes	`medium`	Sets a preset max-width on the modal. Options: default (648px), narrow (360px), wide (960px)
title	string	`''`	Text to display in the modal header

Name	Description
headerAction	Adds an action to the left side of the header bar. An example usage is a modal with multiple pages and a back button can be inserted here
featured-content
default
footer	Overrides the whole footer section. Used for rendering custom footers with more than 2 actions. If defined, "actions" slot will get ignored.
actions	Modal footer actions, supports rendering up to 2 `<Button>` children