KAlert

Displays important alert messages.

Install

pnpm

pnpm add @ikun-ui/alert

yarn

yarn add @ikun-ui/alert

npm

npm install @ikun-ui/alert

Basic usage

Alert components are non-overlay elements in the page that does not disappear automatically.

Alert provides 4 types of themes defined by type, whose default value is info.

success alert

error alert

warning alert

info alert

Customizable Close Button

Customize the close button as texts or other symbols.

Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. closable attribute decides if the component can be closed or not. It accepts boolean, and the default is true. close event fires when the component is closed.

In addition, close slot will cover closeIcon.

unclosable alert

customized close icon

customized close button

Close Button

slot will cover closeIcon

Cover Close Icon

With Icon

Displaying an icon improves readability.

Setting the showIcon attribute displays an icon that corresponds with the current Alert type.

In addition, icon slot will cover icon.

success alert

error alert

warning alert

info alert

With Description

Description includes a message with more detailed information.

Besides the title attribute, you can add a description attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.

Description Attribute

This is the description

Description Slot

This is the description

Alert Props

Name	Type	Default	Description
type	success | error | warning | info	info	alert type.
title	string	''	alert title.
description	string	''	descriptive text.
showIcon	boolean	false	whether a type icon is displayed.
icon	string	''	The class name of the icon, following the unocss standard.
closable	boolean	true	whether alert can be dismissed.
closeIcon	string	i-carbon-close	customized close icon.
cls	string	''	Additional class for component
attrs	any	{}	Additional attributes

Alert Events

Name	Description	Type
close	trigger when alert is closed.	(event: PointerEvent)=> void

Alert Slots

Name	Description
default	content of the description.
title	content of the title.
icon	content of the icon.
close	content of the close.