Alert

Use the KAlert component to display contextual feedback messages. Alerts come in four types (info, success, warning, danger) and support optional titles, rich slot content, and smooth dismiss animations.

Alert Types

This is an informational message.

Your changes have been saved successfully.

Please review the following before continuing.

An error occurred. Please try again.

With Title

Note

Files are processed asynchronously and may take a moment.

Done!

The import completed with no errors.

Action Required

Your session will expire in 5 minutes.

Oops!

We could not connect to the server. Check your network connection.

Dismissible

Click the × button to dismiss this alert. It fades out with a smooth transition.

Task completed. This notification will disappear when dismissed.

Two-Way Binding with v-model

Controlled Visibility

This alert's visibility is controlled with v-model="showAlert". You can dismiss it with the × button or restore it using the button above.

Name	Type	Default	Description
v-model / modelValue	`boolean`	`true`	Controls alert visibility with two-way binding. Set to false when dismissed.
type	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Sets the visual style and semantic context of the alert.
title	`string`	`undefined`	Optional bold heading displayed above the alert body content.
dismissible	`boolean`	`false`	When true, displays an × button. Clicking it hides the alert with a fade-out transition.
icon	`string`	`undefined`	Custom icon name to override the default type icon.
hideIcon	`boolean`	`false`	When true, hides the leading status icon.

Name	Payload	Description
update:modelValue	`(value: boolean)`	Emitted when alert visibility changes (e.g. dismissed).
dismiss	`void`	Emitted after the user clicks the × dismiss button and the alert is hidden.