Components

SuccessModalDialog

A preconfigured modal dialog designed to display success messages with visual feedback and actions.

ModalDialog

SuccessModalDialog

DangerModalDialog

InfoModalDialog

Component

Show playground

 <template>
    <SuccessModalDialog 
        v-model="showModal"
        icon="mdi:check-bold"
        title="Modal title"
        description="Modal description"
        buttonText="Close"
        cardClass="max-w-[520px]"
        :closeOnClickOutside="false"
        :hasCornerCloseButton="false"
    />
    <ActionButton 
        :styleType="ButtonStyleType.NEUTRAL_FILLED"
        text="Open Modal"
        @click="showModal = true"
    />
</template>
<script setup lang="ts">
const showModal = ref(false)
</script>

Props

Props	Default	Type
`modelValue`	`false`	`boolean`
`icon`	`'mdi:check-bold'`	`string`
`title`	`'Modal title'`	`string`
`description`	`'Modal description'`	`string`
`buttonText`	`'Close'`	`string`
`cardClass`	`'max-w-[400px]'`	`string`
`closeOnClickOutside`	`false`	`boolean`
`hasCornerCloseButton`	`false`	`boolean`
`closeAriaLabel`	`'Close'`	`string`

Slots

Name	Description
`default`	Template to render custom content in the body of the modal, between the header and the actions. It is particularly useful for inserting alerts or forms inside the modal.

 <template>
    <SuccessModalDialog>
        <!-- Insert content here -->
    </SuccessModalDialog>
</template>

Usage

modelValue

Sets the modal to open or close.

 <template>
    <SuccessModalDialog v-model="showModal" />
</template>
<script setup="ts">
const showModal = ref(false)
</script>

Type: boolean
Default: false

icon

Sets the icon for the modal.

 <template>
    <SuccessModalDialog icon="mdi:check-bold" />
</template>

Type: string
Default: 'mdi:check-bold'

title

Sets the title for the modal.

 <template>
    <SuccessModalDialog title="Modal title" />
</template>

Type: string
Default: 'Modal title'

description

Sets the description for the modal.

 <template>
    <SuccessModalDialog description="Modal description" />
</template>

Type: string
Default: 'Modal description'

buttonText

Sets the text for the close button.

 <template>
    <SuccessModalDialog buttonText="Close" />
</template>

Type: string
Default: 'Close'

cardClass

Sets the classes for the modal card. It can be used to set the maximum width of the modal card.

 <template>
    <ModalDialog :cardClass="'max-w-[400px]' />
</template>

Type: string
Default: 'max-w-[600px]'

closeOnClickOutside

Enables to close the modal when clicking outside the modal card. If set to false, the modal cannot be closed by clicking outside the modal card.

 <template>
    <SuccessModalDialog :closeOnClickOutside="false" />
</template>

Type: boolean
Default: false

hasCornerCloseButton

Sets the close button to have a corner button. If set to false, the close button needs to be be a button inside the modal.

 <template>
    <SuccessModalDialog :hasCornerCloseButton="false" />
</template>

Type: boolean
Default: false

closeAriaLabel

Sets the accessible label for the corner close button. Useful for i18n.

 <template>
    <SuccessModalDialog closeAriaLabel="Cerrar" />
</template>

Type: string
Default: 'Close'