Badge 徽标

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

用于显示状态、标签或数字标记的组件,支持多种颜色、尺寸和样式变体,可配置为常规或胶囊形状。

基础用法

通过 label 设置徽章文本,color 与 variant 控制颜色与样式。
Template 示例:
<Badge label="新功能" color="success" variant="solid" />
效果展示如下:




属性说明

属性名
类型
描述
默认值
label
string
徽章文本内容
-
color
"secondary" | "success" | "danger" | "warning" | "info" | "discovery"
徽章颜色
"secondary"
variant
"solid" | "soft" | "outline"
徽章样式变体
"solid"
size
"sm" | "md" | "lg"
徽章尺寸
"md"
pill
boolean
是否为胶囊形状
false
注意:
★ 标记为必填属性。

颜色说明

secondary:次要/默认颜色
success:成功/绿色
danger:危险/红色
warning:警告/黄色
info:信息/蓝色
discovery:发现/紫色

样式变体说明

solid:实心填充
soft:柔和背景
outline:边框样式