Skip to content

Badge 徽章

徽章组件,用于标注状态、等级、分类等信息。

基础用法

尺寸

自定义内容

通过默认插槽自定义内容(优先级高于 label prop)。

博客卡片中的使用

API

Props

属性类型默认值说明
labelstring''徽章文字
color'primary' | 'success' | 'warning' | 'error''primary'主题色
size'sm' | 'md''md'尺寸

Slots

名称说明
default徽章内容(优先级高于 label

注意事项

  • 徽章默认使用半透明背景 + 主题色文字,符合 Moongate 的克制美学
  • 颜色变体与 Button 组件保持一致,便于统一主题
  • 小尺寸(sm)适合用于紧凑界面(如表格、标签列表)
  • 默认尺寸(md)适合用于卡片头部等常见场景

Released under the MIT License