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.

一条信息

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

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

一条信息

蓝色，中性提示。

保存成功

绿色，正向反馈。

磁盘空间不足

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

无法连接到服务

红色，严重错误。

<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 —— 满色背景，文字反白。

<CfAlert tone="success" variant="soft">soft — tinted background</CfAlert>
<CfAlert tone="success" variant="outline">outline — transparent + matching border</CfAlert>
<CfAlert tone="success" variant="solid">solid — filled background</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。

<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 图标，更紧凑。

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

<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