Alert 提示

新粗野主义风格的警告组件，用于显示状态消息，支持 7 种颜色变体。

预览

Preview

默认

这是一条默认提示信息。

主要

这是一条重要提示信息。

危险

这是一条危险警告信息。

可关闭的提示

点击右上角的 × 按钮可以关闭此提示。

存储空间不足

您的存储空间已使用 90%，请及时清理或升级。

安装

pnpm dlx brutx-vue@latest add alert

用法

<script setup>
import { Alert, AlertTitle, AlertDescription } from 'brutx-ui-vue'
</script>

<template>
    <Alert variant="default">
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
    </Alert>
</template>

变体

变体	说明
default	标准背景色，前景色文字
primary	Primary（珊瑚色）背景
secondary	Secondary（薄荷青）背景
success	Success（绿色）背景
warning	Warning（黄色）背景
danger	Destructive（红色）背景
info	Info（蓝色）背景

<script setup>
import { Alert } from 'brutx-ui-vue'
</script>

<template>
    <Alert variant="success">Operation completed successfully.</Alert>
    <Alert variant="danger">Failed to save changes.</Alert>
    <Alert variant="info">A new version is available.</Alert>
</template>

带图标

Alert 支持通过 SVG 子元素放置图标。图标绝对定位于左侧：

<script setup>
import { Alert, AlertTitle, AlertDescription } from 'brutx-ui-vue'
import { Terminal } from '@lucide/vue'
</script>

<template>
    <Alert variant="default">
        <Terminal class="h-5 w-5" />
        <AlertTitle>Terminal</AlertTitle>
        <AlertDescription>Run commands in your terminal.</AlertDescription>
    </Alert>
</template>

可关闭提示

通过 closable 属性在提示框右上角渲染一个关闭按钮（使用 Button 组件 variant="ghost" size="icon"）。点击按钮会触发 close 事件。启用 closable 时，提示框会自动添加右侧内边距（pr-12）以避免内容与按钮重叠。

<script setup>
import { ref } from 'vue'
import { Alert, AlertTitle, AlertDescription } from 'brutx-ui-vue'

const visible = ref(true)

function handleClose() {
    visible.value = false
}
</script>

<template>
    <Alert v-if="visible" variant="info" closable @close="handleClose">
        <AlertTitle>可关闭的提示</AlertTitle>
        <AlertDescription>点击右上角的 × 按钮可以关闭此提示。</AlertDescription>
    </Alert>
</template>

操作按钮

通过 action 具名插槽在提示内容下方添加操作按钮区域。插槽内容会渲染在一个带间距的弹性布局容器中（mt-3 flex items-center gap-2）。

<script setup>
import { Alert, AlertTitle, AlertDescription, Button } from 'brutx-ui-vue'
</script>

<template>
    <Alert variant="warning">
        <AlertTitle>存储空间不足</AlertTitle>
        <AlertDescription>您的存储空间已使用 90%，请及时清理或升级。</AlertDescription>
        <template #actions>
            <Button variant="primary" size="sm">立即升级</Button>
            <Button variant="outline" size="sm">稍后提醒</Button>
        </template>
    </Alert>
</template>

API 参考

Alert

Alert — 属性

名称	类型	默认值	说明
variant	"danger-subtle" | "danger" | "default" | "info-subtle" | "info" | "primary-subtle" | "primary" | "secondary-subtle" | "secondary" | "success-subtle" | "success" | "warning-subtle" | "warning" | undefined	"default"	控制提示框的颜色、边框和背景变体
详情 声明类型 NonNullable<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "primary-subtle" | "secondary-subtle" | "warning-subtle" | "danger-subtle" | "success-subtle" | "info-subtle" | null | undefined> | undefined 字面量 "danger-subtle" "danger" "default" "info-subtle" "info" "primary-subtle" "primary" "secondary-subtle" "secondary" "success-subtle" "success" "warning-subtle" "warning" 默认值详情 声明 'default' 来源: packages/ui/src/components/alert/Alert.vue 解析值 "default" 来源 Alert.vue:17 packages/ui/src/components/alert/Alert.vue
closable	boolean | undefined	false	是否显示右上角关闭按钮；点击该按钮会发出 close 事件
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 声明 false 来源: packages/ui/src/components/alert/Alert.vue 解析值 false 来源 Alert.vue:19 packages/ui/src/components/alert/Alert.vue
class	string | undefined	undefined	合并到提示框根元素上的补充 CSS 类名。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/alert/Alert.vue 解析值 undefined 来源 Alert.vue:20 packages/ui/src/components/alert/Alert.vue

Alert — 事件

名称	签名或类型	说明
@close	[]	点击可关闭提示框的关闭按钮时触发，不携带参数。
详情 声明类型 [] 来源 Alert.vue packages/ui/src/components/alert/Alert.vue

Alert — 插槽

名称	签名或类型	说明
#default	{}	提示框的主体内容，通常包含标题、描述或其他自定义内容。
详情 声明类型 {} 来源 Alert.vue packages/ui/src/components/alert/Alert.vue
#actions	{}	可选操作区域；提供此插槽时，操作内容会显示在主体内容下方。
详情 声明类型 {} 来源 Alert.vue packages/ui/src/components/alert/Alert.vue

AlertDescription

AlertDescription — 属性

名称	类型	默认值	说明
id	string | undefined	—	描述文本的 DOM id；未传入时自动生成，供 Alert 根节点通过 aria-describedby 关联
详情 声明类型 string | undefined 默认值详情 未声明默认值 — 来源 AlertDescription.vue:8 packages/ui/src/components/alert/AlertDescription.vue
class	string | undefined	—	合并到描述元素上的补充 CSS 类名。
详情 声明类型 string | undefined 默认值详情 未声明默认值 — 来源 AlertDescription.vue:9 packages/ui/src/components/alert/AlertDescription.vue

AlertDescription — 插槽

名称	签名或类型	说明
#default	{}	提示框的描述内容；嵌套在 Alert 中时，其 DOM id 会参与根节点的 aria-describedby 关联。
详情 声明类型 {} 来源 AlertDescription.vue packages/ui/src/components/alert/AlertDescription.vue

AlertTitle

AlertTitle — 属性

名称	类型	默认值	说明
as	AsTag | Component | undefined	"h5"	指定标题渲染为哪个 HTML 元素或 Vue 组件；默认使用 h5。
详情 声明类型 AsTag | Component | undefined 字面量 "a" "button" "div" "form" "h2" "h3" "img" "input" "label" "li" "nav" "ol" "p" "span" "svg" "template" "ul" 默认值详情 声明 'h5' 来源: packages/ui/src/components/alert/AlertTitle.vue 解析值 "h5" 来源 AlertTitle.vue:8 packages/ui/src/components/alert/AlertTitle.vue
asChild	boolean | undefined	undefined	将标题属性、样式和插槽内容合并到唯一子元素上；启用后由子元素决定实际渲染元素。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 声明 undefined 来源: packages/ui/src/components/alert/AlertTitle.vue 解析值 undefined 来源 AlertTitle.vue:10 packages/ui/src/components/alert/AlertTitle.vue
class	string | undefined	undefined	合并到标题元素上的补充 CSS 类名。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/alert/AlertTitle.vue 解析值 undefined 来源 AlertTitle.vue:11 packages/ui/src/components/alert/AlertTitle.vue

AlertTitle — 插槽

名称	签名或类型	说明
#default	{}	标题文本或其他标题内容。
详情 声明类型 {} 来源 AlertTitle.vue packages/ui/src/components/alert/AlertTitle.vue

可访问性

• ARIA 角色：组件自动设置 role="alert"，确保屏幕阅读器能够识别并播报警告内容
• 键盘操作：可关闭提示框的关闭按钮支持 Tab 键聚焦，Enter/Space 键触发关闭
• 焦点管理：关闭按钮具有可见的焦点指示器，符合键盘导航标准
• 语义化结构：AlertTitle 默认渲染为 h5 标题元素，提供清晰的内容层级