Components

DangerModalDialog

A preconfigured modal dialog for displaying informational messages with optional description and actions.

ModalDialog

SuccessModalDialog

DangerModalDialog

InfoModalDialog

Component

Show playground

 <template>
    <DangerModalDialog 
        v-model="showModal"
        icon="mdi:check-bold"
        title="Modal title"
        description="Modal description"
        buttonCloseText="Cancel"
        buttonActionText="Delete"
        buttonActionIcon="mdi:delete"
        :isLoading="false"
        loadingText="Processing..."
        :orientation="Orientation.VERTICAL"
        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:alert-outline`	`string`
`title`	`'Modal title'`	`string`
`description`	`'Modal description'`	`string`
`buttonCloseText`	`'Cancel'`	`string`
`buttonActionText`	`'Delete'`	`string`
`buttonActionIcon`	`'mdi:delete-forever-outline'`	`string`
`isLoading`	`false`	`boolean`
`loadingText`	`'Processing...'`	`string`
`orientation`	`Orientation.HORIZONTAL`	`Orientation`
`cardClass`	`'max-w-[520px]'`	`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>
    <DangerModalDialog>
        <!-- Insert content here -->
    </DangerModalDialog>
</template>

Usage

modelValue

Sets the modal to open or close.

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

Type: boolean
Default: false

icon

Sets the icon for the modal.

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

Type: string
Default: 'mdi:alert-outline'

title

Sets the title for the modal.

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

Type: string
Default: 'Modal title'

description

Sets the description for the modal.

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

Type: string
Default: 'Modal description'

buttonCloseText

Sets the text for the close button.

 <template>
    <DangerModalDialog buttonCloseText="Cancel" />
</template>

Type: string
Default: 'Cancel'

buttonActionText

Sets the text for the action button.

 <template>
    <DangerModalDialog buttonActionText="Delete" />
</template>

Type: string
Default: 'Delete'

buttonActionIcon

Sets the icon for the action button.

 <template>
    <DangerModalDialog buttonActionIcon="mdi:delete-forever-outline" />
</template>

Type: string
Default: 'mdi:delete-forever-outline'

isLoading

Sets the loading state of the action button.

 <template>
    <DangerModalDialog :isLoading="true" />
</template>

Type: boolean
Default: false

loadingText

Sets the text for the loading state of the action button.

 <template>
    <DangerModalDialog 
        :isLoading="true"
        loadingText="Loading..." 
    />
</template>

Type: string
Default: 'Processing...'

orientation

Sets the layout direction of the panel’s actions content. Uses the Orientation enum.

 <template>
    <DangerModalDialog :orientation="Orientation.HORIZONTAL" />
</template>

Type: Orientation
Default: Orientation.HORIZONTAL

Options

Value	Description
`Orientation.HORIZONTAL`	horizontal
`Orientation.VERTICAL`	vertical

cardClass

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

 <template>
    <DangerModalDialog :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>
    <DangerModalDialog :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>
    <DangerModalDialog :hasCornerCloseButton="false" />
</template>

Type: boolean
Default: false

closeAriaLabel

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

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

Type: string
Default: 'Close'

Emits

Value	Description
`@action`	Triggers a custom action when clicking on the action button.
`@close`	Triggers a custom action after closing the modal.