logo
English
导航

Alert

Introduction

The Alert component is used to display important alert messages to users, supporting various types (info/success/warning/error) and custom styles.

Component features:

  • Supports four preset types, each with corresponding icons and colors
  • Can add titles to make alerts more prominent
  • Supports custom classes to override default styles
  • Responsive design, adapts to different screen sizes

Basic Usage

The simplest way to display alert messages:

              ---
/**
 * @component Alert.Basic
 *
 * @description
 * 基础Alert组件示例，展示最简单的信息提示用法。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info">这是一条信息提示</Alert>

Alert with Title

Add a title using the title property:

              ---
/**
 * @component Alert.WithTitle
 *
 * @description
 * 带标题的Alert组件示例，展示如何使用title属性添加标题。
 */

import { Alert } from '@coffic/cosy-ui';
---

<Alert type="success" title="操作成功">您的操作已成功完成</Alert>

Alert Types

The Alert component supports four preset types:

              ---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info">这是一条信息提示</Alert>

            
              ---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="success">这是一条成功提示</Alert>

            
              ---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="warning">这是一条警告提示</Alert>

            
              ---
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="error">这是一条错误提示</Alert>

Custom Styles

Customize alert box styles using the class property:

              ---
/**
 * @component Alert.CustomStyle
 *
 * @description
 * 展示如何使用class属性自定义Alert组件的样式。
 */

import { Alert } from '@coffic/cosy-ui';
---

<Alert
  type="info"
  class="cosy:bg-purple-100 cosy:text-purple-800 cosy:border-purple-300">
  这是一个自定义样式的提示框
</Alert>