Alert

Used to display important alert messages on the page.

?

Name	Category	Description	Type	Default
type	? Style	Type	'success' | 'warning' | 'info' | 'danger'	'info'
center	? Style	Whether to center text	boolean	false
show-icon	? Style	Whether to show icon	boolean	false
effect	? Style	Theme effect	'light' | 'dark'	'light'
outline	? Style	Outline border style	boolean	false
dash	? Style	Dash border style	boolean	false
color	? Color	Custom hex color	string	—
closable	? Behavior	Whether closable	boolean	true
title	? Content	Title	string	—
description	? Content	Description text	string	—
close	? Event	Triggered when closed	() => void	—
default	? Slot	Default content		—
title	? Slot	Title content		—

Basic Usage

Use type property to define different types of alerts.

<template>
  <h2>通过 slot 传入内容</h2>
  <div style="max-width: 600px">
    <px-alert type="success">Success alert</px-alert>
    <px-alert type="info">Info alert</px-alert>
    <px-alert type="warning">Warning alert</px-alert>
    <px-alert type="danger">Error alert</px-alert>
  </div>
  <h2>通过 prop 传入内容</h2>
  <div style="max-width: 600px">
    <px-alert type="success" title="Success alert" />
    <px-alert type="info" title="Info alert" />
    <px-alert type="warning" title="Warning alert" />
    <px-alert type="danger" title="Error alert" />
  </div>
</template>

Theme

Use effect property to set the theme style: light or dark.

<template>
  <div style="max-width: 600px">
    <px-alert title="Success Alert" type="success" effect="dark" />
    <px-alert title="Info Alert" type="info" effect="dark" />
    <px-alert title="Warning Alert" type="warning" effect="dark" />
    <px-alert title="Error Alert" type="danger" effect="dark" />
  </div>
</template>

Closable

Use closable property to set whether it can be closed.

<script setup>
function handleClose() {}
</script>
<template>
  <div class="basic block">
    <px-alert title="Unclosable alert" type="success" :closable="false" />
    <px-alert title="Alert with callback" type="warning" @close="handleClose" />
  </div>
</template>

Show Icon

Use show-icon property to display the type icon.

<template>
  <div style="max-width: 600px">
    <px-alert title="Success alert" type="success" show-icon />
    <px-alert title="Info alert" type="info" show-icon />
    <px-alert title="Warning alert" type="warning" show-icon />
    <px-alert title="Error alert" type="danger" show-icon />
  </div>
</template>

With Description

Use description property to add description text.

<template>
  <div style="max-width: 600px">
    <px-alert
      title="With description"
      type="success"
      description="This is a description."
    />
  </div>
</template>

Icon and Description

Use both icon and description together.

<template>
  <div style="max-width: 600px">
    <px-alert
      title="Success alert"
      type="success"
      description="More text description"
      show-icon
    />
    <px-alert
      title="Info alert"
      type="info"
      description="More text description"
      show-icon
    />
    <px-alert
      title="Warning alert"
      type="warning"
      description="More text description"
      show-icon
    />
    <px-alert
      title="Error alert"
      type="danger"
      description="More text description"
      show-icon
    />
  </div>
</template>

Centered Text

Use center property to center the content.

<template>
  <div style="max-width: 600px">
    <px-alert title="Success alert" type="success" center show-icon />
    <px-alert title="Info alert" type="info" center show-icon />
    <px-alert title="Warning alert" type="warning" center show-icon />
    <px-alert title="Error alert" type="danger" center show-icon />
  </div>
</template>

Outline

Use outline property to display a solid border with transparent background.

<template>
  <div style="max-width: 600px">
    <px-alert type="success" title="Success outline alert" outline />
    <px-alert type="info" title="Info outline alert" outline />
    <px-alert type="warning" title="Warning outline alert" outline />
    <px-alert type="danger" title="Danger outline alert" outline />
  </div>
</template>

Dash

Use dash property to display a dashed border with a light background.

<template>
  <div style="max-width: 600px">
    <px-alert type="success" title="Success dash alert" dash />
    <px-alert type="info" title="Info dash alert" dash />
    <px-alert type="warning" title="Warning dash alert" dash />
    <px-alert type="danger" title="Danger dash alert" dash />
  </div>
</template>

Custom Color

Use color property to set a custom hex color. Works with default, outline, and dash variants.

<template>
  <div style="max-width: 600px">
    <px-alert title="Custom color alert" color="#8b5cf6" />
    <px-alert title="Outline with custom color" color="#8b5cf6" outline />
    <px-alert title="Dash with custom color" color="#8b5cf6" dash />
    <px-alert title="Custom orange alert" color="#f97316" />
  </div>
</template>