Components

Alert

Display contextual messages such as info, warnings, or success notifications with optional icons and actions.

Component

View code

Show playground

Title

Description

Props

Props	Default	Type
`type`	`AlertType.WARNING`	`AlertType`
`icon`	—	`string`
`title`	`'Title'`	`string`
`description`	—	`string`
`hasActionButtons`	`false`	`boolean`
`buttons`	—	`AlertButton[]`
`hasCloseButton`	`false`	`boolean`

Slots

Name	Description
`description`	Overrides the description prop with custom content. When provided, the alert renders as if a description was set, even if the description prop is empty.

 <template>
    <Alert title="Title">
        <template #description>
            <p class="text-sm">
                Custom description with a <a href="/">link</a>.
            </p>
        </template>
    </Alert>
</template>

Usage

type

The type prop determines the type of the alert. It accepts values from the AlertType enum.

 <template>
    <Alert 
        :type="AlertType.SUCCESS"  
    />
</template>

Type: AlertType
Default: AlertType.WARNING

Options

Value	Description
`INFO`	Info alert
`SUCCESS`	Success alert
`DANGER`	Danger alert
`WARNING`	Warning alert

icon

Sets the icon of the alert.

By default, it will use specific icons for each type of alert.

 <template>
    <Alert 
        icon="info"  
    />
</template>

Type: string

title

Sets the title of the alert.

 <template>
    <Alert 
        title="Title"  
    />
</template>

Type: string
Default: 'Title'

description

Sets the description of the alert.

 <template>
    <Alert 
        description="Description"  
    />
</template>

Type: string

hasActionButtons

Sets whether the alert renders the buttons array when no description is provided.

 <template>
    <Alert 
        title="Title"
        hasActionButtons
        :buttons="exampleButtons"
    />
</template>

Type: boolean
Default: false

buttons

Sets the buttons of the alert. When no description is provided, also set hasActionButtons to true to render them.

 <template>
    <Alert 
        buttons="exampleButtons"
    />
</template>
<script setup="ts">
const exampleButtons: AlertButton[] = [
    {
        text: "View details",
        actionType: "link",
        to: "/",
    },
    {
        text: "Dismiss",
        callback: () => console.log("close"),
    },
]
</script>

TypeScript interface

 interface AlertButton {
    text: string
    actionType?: ButtonActionType
    icon?: any
    iconPosition?: IconPosition
    disabled?: boolean
    to?: string
    isExternal?: boolean
    callback?: () => void
}

Button iconPosition options

Value	Description
`LEFT`	left
`RIGHT`	right
`NONE`	none (icon does not appear at all)

Buttons actionType options

Value	Description
`ACTION`	Converts the HTML tag of the component into a '<button>' tag. Use 'callback' key to trigger functions.
`LINK`	Converts the HTML tag of the component into a '<a>' tag. Use 'to' key to set a link

hasCloseButton

Sets whether the alert has a icon close button.

Important

This close button appears regardless of whether a description is provided.

 <template>
    <Alert 
        description="Some description"
        hasCloseButton="true"
    />
</template>

Type: boolean
Default: false

Emits

Value	Description
`@close`	Triggers a callback function when the close button is clicked.

Example

 <template>
    <Alert 
        v-if="showAlert"
        description="Some description"
        hasCloseButton="true"
        @close="handleClose"
    />
</template>
<script setup lang="ts">
const showAlert = ref(true)

const handleClose = () => {
    showAlert.value = false
}
</script>