Alert

KAlert is used to display contextual information to a user (typically additional info or error messages).

Important

Alert message with important information for user.

<KAlert
  title="Important"
  message="Alert message with important information for user."
/>

Props

message

The alert message. The main content of the alert can also be slotted.

Alert message with important information for user.

<KAlert
  message="Alert message with important information for user."
/>

appearance

Depending on the nature of the message you want to display to the user, KAlert comes with 4 appearances:

• info (default)
• success
• warning
• danger
• decorative

This is info alert.

This is success alert.

This is warning alert.

This is danger alert.

This is decorative alert.

<KAlert
  appearance="info"
  message="This is info alert."
/>
<KAlert
  appearance="success"
  message="This is success alert."
/>
<KAlert
  appearance="warning"
  message="This is warning alert."
/>
<KAlert
  appearance="danger"
  message="This is danger alert."
/>
<KAlert
  appearance="decorative"
  message="This is decorative alert."
/>

title

A prop to provide the alert title.

Important update on how we handle third-party cookies

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<KAlert
  title="Important update on how we handle third-party cookies"
  appearance="warning"
  message="Lorem ipsum dolor sit amet..."
/>

showIcon

Boolean to display icon before the content. Each KAlert appearance comes with a default icon, however should you want to, you can provide your own icon through icon slot. Defaults to false.

NOTE

If you provide your custom icon through icon slot, it will be shown regardless of this prop value.

This is info alert with icon.

This is success alert with icon.

This is warning alert with icon.

This is danger alert with icon.

This is decorative alert with icon.

<KAlert
  show-icon
  appearance="info"
  message="This is info alert with icon."
/>
<KAlert
  show-icon
  appearance="success"
  message="This is success alert with icon."
/>
<KAlert
  show-icon
  appearance="warning"
  message="This is warning alert."
/>
<KAlert
  show-icon
  appearance="danger"
  message="This is danger alert with icon."
/>
<KAlert
  show-icon
  appearance="decorative"
  message="This is decorative alert with icon."
/>

dismissible

Boolean to control whether dismiss button should be displayed. Defaults to false.

Alert message with important information for user.

<KAlert
  dismissible
  message="Alert message with important information for user."
/>

Slots

default

Slot for passing alert message content. When provided, takes precedence over the message prop.

We update our privacy policy. More info

<KAlert>
  We update our privacy policy. <KExternalLink href="https://kongponents.konghq.com/">More info</KExternalLink>
</KAlert>

icon

Slot for providing a custom icon to the left of the alert message.

NOTE

If you provide your custom icon through this slot, it will be shown regardless of showIcon prop value.

This is success alert with custom icon.

<KAlert
  appearance="success"
  message="This is success alert with custom icon."
>
  <template #icon>
    <KongIcon />
  </template>
</KAlert>

Events

dismiss

Emitted when dismiss icon is clicked.

Alert message with important information for user.

<template>
  <KAlert
    v-if="showAlert"
    dismissible
    message="Alert message with important information for user."
    @dismiss="hideAlert"
  />
</template>

<script setup lang="ts">
const showAlert = ref<boolean>(true)

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