logo
English

导航菜单

Documents

Alert

Introduction

The Alert component is used to display important alert messages to users, supporting various types of alert styles and interactive effects.

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
  • Can control whether to display icons
  • Supports setting vertical margin
  • Supports multiple style variants

Examples

---
/**
 * @component EAlertBasic
 * @description The basic usage of Alert component.
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>

Props

class

Custom CSS class name for overriding default styles.

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

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

<Alert type="info" class="custom-alert"> 这是一个自定义样式的提示框 </Alert>

<style>
  .custom-alert {
    background-color: #f3e8ff;
    color: #581c87;
    border: 1px solid #c084fc;
  }
</style>

closable

Whether the alert is closable. When set to false, the close button is hidden.

---
/**
 * @component EAlertBasic
 * @description The basic usage of Alert component.
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>

---
/**
 * @component EAlertNotClosable
 * @description An example of a non-closable Alert.
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="warning" closable={false}> 这是一条不可关闭的警告提示 </Alert>

description

Description text displayed below the title, with smaller font size and reduced opacity.

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

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

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

marginY

Vertical margin size, supporting preset size values.

---
/**
 * @component EAlertMarginYXs
 * @description 展示 Alert 组件的超小垂直外边距功能。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" marginY="xs"> 超小间距的提示信息 </Alert>

---
/**
 * @component EAlertMarginYSm
 * @description 展示 Alert 组件的垂直外边距功能。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="success" marginY="sm"> 小间距的成功提示 </Alert>

---
/**
 * @component EAlertMarginYMd
 * @description 展示 Alert 组件的中等垂直外边距功能。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="warning" marginY="md"> 中等间距的警告提示 </Alert>

---
/**
 * @component EAlertMarginYLg
 * @description 展示 Alert 组件的大垂直外边距功能。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="error" marginY="lg"> 大间距的错误提示 </Alert>

---
/**
 * @component EAlertMarginYXl
 * @description 展示 Alert 组件的超大垂直外边距功能。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" marginY="xl"> 超大间距的信息提示 </Alert>

showIcon

Whether to display the icon. When set to false, the type-specific icon is hidden.

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

<Alert type="info" showIcon={false}> 这是一个不显示图标的信息提示 </Alert>


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

<Alert type="success" showIcon={false}> 这是一个不显示图标的成功提示 </Alert>


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

<Alert type="warning" showIcon={false}> 这是一个不显示图标的警告提示 </Alert>


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

<Alert type="error" showIcon={false}> 这是一个不显示图标的错误提示 </Alert>

title

Alert title, optional, displayed as bold text.

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

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

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

type

Alert type, affecting color and icon. Supports four types: info, success, warning, error.

---
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>

variant

Style variant, supporting four styles: solid (filled), outline (bordered), dash (dashed), soft (gentle).

---
/**
 * @component AlertOutlineInfo
 * @description Alert 组件 info 类型 outline 描边风格示例。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" variant="outline" title="Info Outline 风格">
  这是 Info 类型的 Outline 描边风格提示
</Alert>

---
/**
 * @component AlertOutlineSuccess
 * @description Alert 组件 success 类型 outline 描边风格示例。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="success" variant="outline" title="Success Outline 风格">
  这是 Success 类型的 Outline 描边风格提示
</Alert>


---
/**
 * @component AlertOutlineWarning
 * @description Alert 组件 warning 类型 outline 描边风格示例。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="warning" variant="outline" title="Warning Outline 风格">
  这是 Warning 类型的 Outline 描边风格提示
</Alert>


---
/**
 * @component AlertOutlineError
 * @description Alert 组件 error 类型 outline 描边风格示例。
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="error" variant="outline" title="Error Outline 风格">
  这是 Error 类型的 Outline 描边风格提示
</Alert>

Basic Usage

The simplest way to display alert messages:

---
/**
 * @component EAlertBasic
 * @description The basic usage of Alert component.
 */
import { Alert } from '@coffic/cosy-ui';
---

<Alert type="info" closable> 这是一条可以关闭的信息提示 </Alert>

Custom Action Button

You can use the action slot to add a custom action button on the right side of the Alert:

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

<Alert type="info" title="自定义操作">
  你可以通过 action slot 在右侧自定义按钮。
  <div slot="action">
    <button
      style="
        background-color: #3b82f6;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        cursor: pointer;
        font-size: 0.875rem;
      "
      onclick="alert('自定义操作')">
      自定义操作
    </button>
  </div>
</Alert>

This slot is rendered on the right side of the Alert, suitable for custom buttons or other actions.

搜索