BrutxUI

简体中文

English

简体中文

English

外观

Badge 徽标 ​

新粗野主义风格的行内徽章组件，用于标签、状态和分类。支持多种变体、尺寸、圆点指示器、脉冲动画和可关闭功能。

预览 ​

Preview

变体

默认主要次要强调危险成功轮廓

尺寸

小默认大

圆点指示器

在线可用离线小尺寸

脉冲动画

实时同步中新消息直播中

图标插槽

已完成 需要注意 收藏

可关闭徽标

VueTypeScriptTailwind CSS

安装 ​

pnpm dlx brutx-vue@latest add badge

用法 ​

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

<template>
    <Badge variant="default">Default</Badge>
    <Badge variant="primary">Primary</Badge>
    <Badge variant="success">Success</Badge>
</template>

圆点指示器 ​

通过 dot 属性在徽标前渲染一个小圆点，常用于状态指示。圆点颜色继承当前文本颜色（bg-current），尺寸随 size 自动调整。

尺寸圆点大小右间距
smh-1.5 w-1.5mr-1
defaulth-2 w-2mr-1.5
lgh-2.5 w-2.5mr-2
vue
<script setup>
import { Badge } from 'brutx-ui-vue'
</script>

<template>
    <Badge dot>在线</Badge>
    <Badge variant="success" dot>可用</Badge>
    <Badge variant="danger" dot>离线</Badge>
    <Badge variant="accent" dot size="sm">小尺寸</Badge>
</template>

脉冲动画 ​

通过 pulse 属性为圆点启用脉冲动画（animate-brutal-badge-pulse）。pulse 隐含 dot，无需同时设置。适用于实时状态、新消息提醒等需要吸引注意力的场景。

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

<template>
    <Badge variant="success" pulse>实时同步中</Badge>
    <Badge variant="danger" pulse>新消息</Badge>
    <Badge variant="primary" pulse>直播中</Badge>
</template>

可关闭徽标 ​

通过 closable 属性在徽标右侧渲染一个关闭按钮（X 图标）。点击按钮会触发 close 事件，且事件不会冒泡（内部已调用 stopPropagation）。关闭按钮内置无障碍支持，aria-label 通过国际化系统自动适配当前语言。

vue
<script setup>
import { ref } from 'vue'
import { Badge } from 'brutx-ui-vue'

const tags = ref(['Vue', 'TypeScript', 'Tailwind CSS'])

function handleClose(index: number) {
    tags.value.splice(index, 1)
}
</script>

<template>
    <div class="flex flex-wrap items-center gap-2">
        <Badge
            v-for="(tag, index) in tags"
            :key="tag"
            variant="primary"
            closable
            @close="handleClose(index)"
        >
            {{ tag }}
        </Badge>
        <span v-if="tags.length === 0" class="text-sm text-brutal-fg">所有标签已关闭</span>
    </div>
</template>

图标插槽 ​

通过 icon 具名插槽在徽标内容前插入图标。建议使用 @lucide/vue 图标库，并根据 size 设置合适的图标尺寸。

vue
<script setup>
import { Badge } from 'brutx-ui-vue'
import { CheckCircle, AlertTriangle, Info } from '@lucide/vue'
</script>

<template>
    <Badge variant="success">
        <template #icon>
            <CheckCircle class="h-3.5 w-3.5" />
        </template>
        已完成
    </Badge>
    <Badge variant="danger">
        <template #icon>
            <AlertTriangle class="h-3.5 w-3.5" />
        </template>
        需要注意
    </Badge>
    <Badge variant="secondary">
        <template #icon>
            <Info class="h-3.5 w-3.5" />
        </template>
        提示信息
    </Badge>
</template>

组合使用 ​

圆点、图标插槽和关闭按钮可组合使用：

vue
<script setup>
import { Badge } from 'brutx-ui-vue'
import { Star } from '@lucide/vue'

function handleClose() {
    console.log('徽标已关闭')
}
</script>

<template>
    <Badge variant="primary" dot closable @close="handleClose">
        状态徽标
    </Badge>
    <Badge variant="accent" closable @close="handleClose">
        <template #icon>
            <Star class="h-3.5 w-3.5" />
        </template>
        收藏
    </Badge>
</template>

变体 ​

变体说明
default标准背景色，带小阴影
primaryPrimary（珊瑚色）背景
secondarySecondary（薄荷青）背景
accentAccent（黄色）背景
dangerDestructive（红色）背景
successSuccess（绿色）背景
outline透明背景，无阴影

尺寸 ​

尺寸内边距字体大小
smpx-2 py-0.5text-xs
defaultpx-3 py-1text-sm
lgpx-4 py-1.5text-base
vue
<script setup>
import { Badge } from 'brutx-ui-vue'
</script>

<template>
    <Badge variant="primary" size="sm">Small</Badge>
    <Badge variant="primary" size="default">Default</Badge>
    <Badge variant="primary" size="lg">Large</Badge>
</template>

导出类型 ​

组件同时导出 badgeVariants 工具函数，可在自定义组件中复用 Badge 的样式变体：

ts
import { badgeVariants } from 'brutx-ui-vue'

// 返回组合后的 Tailwind 类名字符串
const classes = badgeVariants({ variant: 'primary', size: 'sm' })

API 参考 ​

Badge — 属性
名称类型默认值说明
variant
"accent-subtle" | "accent" | "danger-subtle" | "danger" | "default" | "info-subtle" | "outline" | "primary-subtle" | "primary" | "secondary-subtle" | "secondary" | "success-subtle" | "success" | undefined
"default"
徽标的配色及边框变体。
详情

声明类型

NonNullable<"default" | "primary" | "secondary" | "success" | "danger" | "primary-subtle" | "secondary-subtle" | "danger-subtle" | "success-subtle" | "info-subtle" | "accent" | "outline" | "accent-subtle" | null | undefined> | undefined

字面量

  • "accent-subtle"
  • "accent"
  • "danger-subtle"
  • "danger"
  • "default"
  • "info-subtle"
  • "outline"
  • "primary-subtle"
  • "primary"
  • "secondary-subtle"
  • "secondary"
  • "success-subtle"
  • "success"

默认值详情

声明
'default'

来源: packages/ui/src/components/badge/Badge.vue

解析值
"default"

来源

Badge.vue:20

packages/ui/src/components/badge/Badge.vue

size
"default" | "lg" | "sm" | undefined
"default"
设置徽标尺寸，同时调整圆点、图标间距和关闭图标大小。
详情

声明类型

NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined

字面量

  • "default"
  • "lg"
  • "sm"

默认值详情

声明
'default'

来源: packages/ui/src/components/badge/Badge.vue

解析值
"default"

来源

Badge.vue:21

packages/ui/src/components/badge/Badge.vue

closable
boolean | undefined
false
显示关闭按钮；关闭后是否移除徽标由使用方处理。
详情

声明类型

boolean | undefined

字面量

  • false
  • true

默认值详情

声明
false

来源: packages/ui/src/components/badge/Badge.vue

解析值
false

来源

Badge.vue:22

packages/ui/src/components/badge/Badge.vue

dot
boolean | undefined
false
在徽标内容前显示装饰性圆点。
详情

声明类型

boolean | undefined

字面量

  • false
  • true

默认值详情

声明
false

来源: packages/ui/src/components/badge/Badge.vue

解析值
false

来源

Badge.vue:23

packages/ui/src/components/badge/Badge.vue

pulse
boolean | undefined
false
显示圆点并启用圆点脉冲动画，即使 dot 未开启也会显示。
详情

声明类型

boolean | undefined

字面量

  • false
  • true

默认值详情

声明
false

来源: packages/ui/src/components/badge/Badge.vue

解析值
false

来源

Badge.vue:24

packages/ui/src/components/badge/Badge.vue

class
string | undefined
undefined
合并到徽标根 span 元素的自定义 CSS 类。
详情

声明类型

string | undefined

默认值详情

声明
undefined

来源: packages/ui/src/components/badge/Badge.vue

解析值
undefined

来源

Badge.vue:25

packages/ui/src/components/badge/Badge.vue

Badge — 事件
名称签名或类型说明
@close
[]
点击关闭按钮时发出；组件会先阻止该点击事件冒泡。
详情

声明类型

[]

来源

Badge.vue

packages/ui/src/components/badge/Badge.vue

Badge — 插槽
名称签名或类型说明
#icon
{}
显示在主体内容前的图标；存在插槽时才创建图标容器。
详情

声明类型

{}

来源

Badge.vue

packages/ui/src/components/badge/Badge.vue

#default
{}
徽标的文字或主体内容。
详情

声明类型

{}

来源

Badge.vue

packages/ui/src/components/badge/Badge.vue

可访问性 ​

  • 键盘操作：关闭按钮支持 Space / Enter 触发
  • ARIA 属性：关闭按钮自动设置 aria-label，通过国际化系统适配当前语言
  • 动效降级：尊重 prefers-reduced-motion 系统设置，脉冲动画自动禁用

蛮力铸就。

© 2026 BrutxUI · MIT License