Badge

基础反馈

基于 Bootstrap 5 的徽章组件，用于展示状态、数量或标签等小范围内容，支持多种背景色、胶囊形状、按钮与链接形式，并随父元素字号自动缩放

Component Demo

Basic usage and examples of the Badge component

基础用法

标题一 New

标题二 New

标题三 New

标题四 New

标题五 New

标题六 New

徽章使用相对字号（em 单位），会随父元素的字号自动缩放

背景色变体

PrimarySecondarySuccessDangerWarningInfoLightDarkBody Secondary

胶囊徽章

PrimarySecondarySuccessDangerWarningInfoLightDark

按钮中的徽章

链接徽章

Primary Secondary Success Danger Warning Info Light Dark

交互演示

点击「消息」按钮，徽章计数会增加

API Documentation

Complete API reference for the Badge component

Props

属性名	类型	默认值	描述
`as`	`ElementType`	`'span'`	渲染的根元素类型，可传入 `a`、`button` 等以复用徽章样式
`bg`	`BadgeBg`	`'primary'`	徽章背景色变体，对应 Bootstrap 的 `text-bg-*` 工具类
`children`	`ReactNode`	-	徽章内容
`className`	`string`	-	自定义类名
`href`	`string`	-	链接地址，与 `as="a"` 配合使用
`pill`	`boolean`	`false`	是否使用胶囊（全圆角）形状
`text`	`BadgeText`	-	徽章文字颜色，提供后使用 `bg-` 与 `text-` 组合替代 `text-bg-*`
`...rest`	`HTMLAttributes`	-	根元素的所有原生属性（如 `href`、`onClick` 等）

Type Definitions

BadgeBg

徽章背景色变体类型

type BadgeBg =
  | 'body-secondary'
  | 'danger'
  | 'dark'
  | 'info'
  | 'light'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning';

BadgeProps

徽章组件属性接口

export interface BadgeProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  bg?: BadgeBg;
  children?: ReactNode;
  className?: string;
  href?: string;
  pill?: boolean;
  text?: BadgeText;
}

BadgeText

徽章文字颜色类型

type BadgeText = 'dark' | 'light';