🌏 Translated with the assistance of DeepSeek and ChatGPT

Alert

A message bar component used to display important information or feedback for actions.

Alert Types

The Alert supports various types: 'info' (default), 'success', 'warning', 'error', 'loading', 'normal', 'sakura' and 'notice'.

Info

Notice

Success

Warning

Error

Sakura

Normal

<template>
	<px-space direction="vertical">
		<px-alert>Info</px-alert>
		<px-alert type="notice">Notice</px-alert>
		<px-alert type="success">Success</px-alert>
		<px-alert type="warning">Warning</px-alert>
		<px-alert type="error">Error</px-alert>
		<px-alert type="sakura">Sakura</px-alert>
		<px-alert type="loading">Loading</px-alert>
		<px-alert type="normal">Normal</px-alert>
	</px-space>
</template>

Alert Variants

The Alert has two style variants: 'plain' (default) and 'primary'.

Info

Notice

Success

Warning

Error

Sakura

Normal

<template>
	<px-space direction="vertical">
		<px-alert variant="primary">Info</px-alert>
		<px-alert variant="primary" type="notice">Notice</px-alert>
		<px-alert variant="primary" type="success">Success</px-alert>
		<px-alert variant="primary" type="warning">Warning</px-alert>
		<px-alert variant="primary" type="error">Error</px-alert>
		<px-alert variant="primary" type="sakura">Sakura</px-alert>
		<px-alert variant="primary" type="loading">Loading</px-alert>
		<px-alert variant="primary" type="normal">Normal</px-alert>
	</px-space>
</template>

Text Alignment

Set textAlign to control the alignment of the content: 'start', 'center', or 'end'.

Start

Center

End

<template>
	<px-space direction="vertical">
		<px-alert>Start</px-alert>
		<px-alert text-align="center">Center</px-alert>
		<px-alert text-align="end">End</px-alert>
	</px-space>
</template>

Title

Use the title prop or title slot to show a prominent title above the content.

Title

Info

Title

Notice

Title

Success

Title

Warning

Title

Error

Title

Sakura

Title

Normal

<template>
	<px-space direction="vertical">
		<px-alert title="Title">Info</px-alert>
		<px-alert title="Title" type="notice">Notice</px-alert>
		<px-alert title="Title" type="success">Success</px-alert>
		<px-alert title="Title" type="warning">Warning</px-alert>
		<px-alert title="Title" type="error">Error</px-alert>
		<px-alert title="Title" type="sakura">Sakura</px-alert>
		<px-alert title="Title" type="loading">Loading</px-alert>
		<px-alert title="Title" type="normal">Normal</px-alert>
	</px-space>
</template>

Closable

Enable closable to show a close icon; the component emits a close event when the icon is clicked.

Info

Success

Notice

Warning

Error

Sakura

Normal

<template>
	<px-space direction="vertical">
		<px-alert closable @close="closeHandler('info')">Info</px-alert>
		<px-alert closable type="success" @close="closeHandler('success')">Success</px-alert>
		<px-alert closable type="notice" @close="closeHandler('notice')">Notice</px-alert>
		<px-alert closable type="warning" @close="closeHandler('warning')">Warning</px-alert>
		<px-alert closable type="error" @close="closeHandler('error')">Error</px-alert>
		<px-alert closable type="sakura" @close="closeHandler('sakura')">Sakura</px-alert>
		<px-alert closable type="loading" @close="closeHandler('loading')">Loading</px-alert>
		<px-alert closable type="normal" @close="closeHandler('normal')">Normal</px-alert>
	</px-space>
</template>
<script lang="ts" setup>
const closeHandler = (type: string) => {
	$message[type](`Closed ${type} alert`)
}
</script>

Icon

Set the icon position via iconPlacement: 'start' or 'text-leading'; control icon visibility via showIcon; customize the icon via the icon slot.

No Icon

Custom Icon

Text Center & Icon Start

Text End & Icon Start

<template>
	<px-space direction="vertical">
		<px-alert :show-icon="false"> No Icon </px-alert>
		<px-alert type="success">
			Custom Icon
			<template #icon>
				<IconAt />
			</template>
		</px-alert>
		<px-alert type="warning" icon-placement="start" text-align="center">
			Text Center & Icon Start
		</px-alert>
		<px-alert type="error" icon-placement="start" text-align="end">
			Text End & Icon Start
		</px-alert>
	</px-space>
</template>

<script lang="ts" setup>
import { IconAt } from '@pixelium/web-vue/icon-hn/es'
</script>

Custom Color

Set color to provide a custom primary color: the component generates a complete palette from it and the palette will take precedence over preset theme palettes. Supports CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', as well as 3-, 4-, 6-, and 8-digit hex strings.

#3B82F6

#10B981

#F59E0B

#EF4444

<template>
	<px-space direction="vertical">
		<px-alert color="#3B82F6"> #3B82F6 </px-alert>
		<px-alert color="#10B981" type="success"> #10B981 </px-alert>
		<px-alert color="#F59E0B" type="warning"> #F59E0B </px-alert>
		<px-alert color="#EF4444" type="error"> #EF4444 </px-alert>
	</px-space>
</template>

Shape & Rounded Corner Border

Control the shape of the Alert component via shape.

borderRadius sets the Alert's rounded corners and takes precedence over shape, behavior follows CSS border-radius rules.

Single value or array length 1 → applies to all corners
Array length 2 → [top-left & bottom-right, top-right & bottom-left]
Array length 3 → [top-left, top-right & bottom-left, bottom-right]
Array length 4 → applies clockwise from top-left

Info

Success

Sakura

<template>
	<px-space direction="vertical">
		<px-alert shape="round">Info</px-alert>
		<px-alert shape="round" type="success">Success</px-alert>
		<px-alert :border-radius="12" type="sakura">Sakura</px-alert>
	</px-space>
</template>

API

AlertProps

Attribute	Type	Optional	Default	Description	Version
borderRadius	`NumberOrPercentage \| NumberOrPercentage[]`	True		Corner radius, takes precedence over `shape` and behaves like CSS `border-radius`.	0.1.0
shape	`'rect' \| 'round'`	True	`'rect'`	Component shape, `'rect'` or `'round'`.	0.1.0
variant	`'primary' \| 'plain'`	True	`'plain'`	Style variant, `'primary'` or `'plain'`.	0.1.0
type	`'info' \| 'success' \| 'warning' \| 'error' \| 'loading' \| 'normal' \| 'sakura' \| 'notice'`	True	`'primary'`	Type (theme).	0.1.0
textAlign	`'start' \| 'center' \| 'end'`	True	`'start'`	Text alignment, `'start'` / `'center'` / `'end'`.	0.1.0
title	`string`	True		Title text or provided via `title` slot.	0.1.0
color	`string`	True		Custom primary color. It supports CSS-like strings such as `'rgb(r, g, b)'` and `'rgba(r, g, b, a)'`, as well as 3-, 4-, 6-, and 8-digit hexadecimal values.	0.1.0
closable	`boolean`	True	`false`	Whether to show close icon.	0.1.0
iconPlacement	`'start' \| 'text-leading'`	True	`'text-leading'`	Icon placement, `'start'` or `'text-leading'`.	0.1.0
showIcon	`boolean`	True	`'true'`	Whether to show icon.	0.1.0
pollSizeChange	`boolean`	True	`false`	Enable polling for size changes (may impact performance).	0.1.0

AlertEvents

Event	Parameter	Description	Version
close	`e: MouseEvent`	Emitted when close icon is clicked, callback receives `MouseEvent`.	0.1.0

AlertSlots

Slot	Description	Version
default	Default content slot.	0.1.0
title	Title slot.	0.1.0
icon	Icon slot.	0.1.0

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`

Alert ​

Alert Types ​

Alert Variants ​

Text Alignment ​

Title ​

Closable ​

Icon ​

Custom Color ​

Shape & Rounded Corner Border ​

API ​

AlertProps ​

AlertEvents ​

AlertSlots ​

NumberOrPercentage ​

Alert

Alert Types

Alert Variants

Text Alignment

Title

Closable

Icon

Custom Color

Shape & Rounded Corner Border

API

AlertProps

AlertEvents

AlertSlots

NumberOrPercentage