Preview Updated 2026-05-10

Alert

Inline static message bar — 4 tones × 3 variants, with optional title, icon, and close button.

Basic usage

Minimal form — a line of text with a status icon and an optional title.

背景

一条信息

这是一段补充说明，用于解释当前状态。

<script setup lang="ts">
import { CfAlert } from '@chufix-design/vue';
</script>

<template>
  <CfAlert tone="info" title="一条信息">这是一段补充说明，用于解释当前状态。</CfAlert>
</template>

<script setup>
import { CfAlert } from '@chufix-design/vue';
</script>

<template>
  <CfAlert tone="info" title="一条信息">这是一段补充说明，用于解释当前状态。</CfAlert>
</template>

<CfAlert tone="info" title="A message">Here is some additional context.</CfAlert>

<CfAlert tone="info" title="A message">Here is some additional context.</CfAlert>

Four tones

tone sets the semantic color — info / success / warning / error, mapped to the --status-* tokens. Each tone ships with a matching status icon.

背景

一条信息

蓝色，中性提示。

保存成功

绿色，正向反馈。

磁盘空间不足

黄色，需要注意但非阻塞。

无法连接到服务

红色，严重错误。

<script setup lang="ts">
import { CfAlert } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfAlert tone="info" title="一条信息">蓝色，中性提示。</CfAlert>
    <CfAlert tone="success" title="保存成功">绿色，正向反馈。</CfAlert>
    <CfAlert tone="warning" title="磁盘空间不足">黄色，需要注意但非阻塞。</CfAlert>
    <CfAlert tone="error" title="无法连接到服务">红色，严重错误。</CfAlert>
  </div>
</template>

<script setup>
import { CfAlert } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfAlert tone="info" title="一条信息">蓝色，中性提示。</CfAlert>
    <CfAlert tone="success" title="保存成功">绿色，正向反馈。</CfAlert>
    <CfAlert tone="warning" title="磁盘空间不足">黄色，需要注意但非阻塞。</CfAlert>
    <CfAlert tone="error" title="无法连接到服务">红色，严重错误。</CfAlert>
  </div>
</template>

<CfAlert tone="info" title="A message">Blue</CfAlert>
<CfAlert tone="success" title="Saved successfully">Green</CfAlert>
<CfAlert tone="warning" title="Disk space is low">Yellow</CfAlert>
<CfAlert tone="error" title="Cannot connect to the service">Red</CfAlert>

<CfAlert tone="info" title="A message">Blue</CfAlert>
<CfAlert tone="success" title="Saved successfully">Green</CfAlert>
<CfAlert tone="warning" title="Disk space is low">Yellow</CfAlert>
<CfAlert tone="error" title="Cannot connect to the service">Red</CfAlert>

Three variants

variant controls background and border: soft (tinted background, default, most common) / outline (transparent + border, the most restrained) / solid (filled background, the strongest).

背景

soft —— 浅色背景，默认样式。

outline —— 透明背景 + 同色边框。

solid —— 满色背景，文字反白。

<script setup lang="ts">
import { CfAlert } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfAlert tone="success" variant="soft">soft —— 浅色背景，默认样式。</CfAlert>
    <CfAlert tone="success" variant="outline">outline —— 透明背景 + 同色边框。</CfAlert>
    <CfAlert tone="success" variant="solid">solid —— 满色背景，文字反白。</CfAlert>
  </div>
</template>

<script setup>
import { CfAlert } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfAlert tone="success" variant="soft">soft —— 浅色背景，默认样式。</CfAlert>
    <CfAlert tone="success" variant="outline">outline —— 透明背景 + 同色边框。</CfAlert>
    <CfAlert tone="success" variant="solid">solid —— 满色背景，文字反白。</CfAlert>
  </div>
</template>

<CfAlert tone="success" variant="soft">soft</CfAlert>
<CfAlert tone="success" variant="outline">outline</CfAlert>
<CfAlert tone="success" variant="solid">solid</CfAlert>

<CfAlert tone="success" variant="soft">soft</CfAlert>
<CfAlert tone="success" variant="outline">outline</CfAlert>
<CfAlert tone="success" variant="solid">solid</CfAlert>

Close button

closable adds an × button on the right — clicking it removes the alert from the DOM and fires the close / onClose event.

背景

可关闭

右侧出现 × 按钮，点击后整个 alert 从 DOM 中移除。

仅正文 + 关闭按钮，没有 title。

<script setup lang="ts">
import { CfAlert } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfAlert tone="warning" title="可关闭" closable>右侧出现 × 按钮，点击后整个 alert 从 DOM 中移除。</CfAlert>
    <CfAlert tone="info" closable>仅正文 + 关闭按钮，没有 title。</CfAlert>
  </div>
</template>

<script setup>
import { CfAlert } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfAlert tone="warning" title="可关闭" closable>右侧出现 × 按钮，点击后整个 alert 从 DOM 中移除。</CfAlert>
    <CfAlert tone="info" closable>仅正文 + 关闭按钮，没有 title。</CfAlert>
  </div>
</template>

<CfAlert tone="warning" title="Closable" closable>
An × button appears on the right.
</CfAlert>
<CfAlert tone="info" closable>A closable alert without a title.</CfAlert>

<CfAlert tone="warning" title="Closable" closable>
An × button appears on the right.
</CfAlert>
<CfAlert tone="info" closable>A closable alert without a title.</CfAlert>

Hide icon

icon={false} drops the leading status icon — handy in dense text or inline form hints where space is tight.

背景

无图标版本

省去左侧 status 图标，更紧凑。

仅一行文字，最克制的提示形式。

<script setup lang="ts">
import { CfAlert } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfAlert tone="info" :icon="false" title="无图标版本">省去左侧 status 图标，更紧凑。</CfAlert>
    <CfAlert tone="success" :icon="false">仅一行文字，最克制的提示形式。</CfAlert>
  </div>
</template>

<script setup>
import { CfAlert } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfAlert tone="info" :icon="false" title="无图标版本">省去左侧 status 图标，更紧凑。</CfAlert>
    <CfAlert tone="success" :icon="false">仅一行文字，最克制的提示形式。</CfAlert>
  </div>
</template>

<CfAlert tone="info" icon={false} title="No-icon variant">More compact</CfAlert>
<CfAlert tone="success" icon={false}>Just a single line</CfAlert>

<CfAlert tone="info" icon={false} title="No-icon variant">More compact</CfAlert>
<CfAlert tone="success" icon={false}>Just a single line</CfAlert>

API

Prop	Type	Default	Description
`tone`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Semantic color
`variant`	`'soft' \| 'outline' \| 'solid'`	`'soft'`	Visual variant
`title`	`string`	—	Bold emphasis title
`icon`	`boolean`	`true`	Whether to show the leading status icon
`closable`	`boolean`	`false`	Whether to show the trailing × button

Events:

Vue: @close — fires when the user clicks the close button
React: onClose — same as above