跳转到主要内容
使用徽章显示状态指示器、标签或 metadata。将徽章内嵌于文本中,或作为独立元素使用。

基本徽章

徽章

颜色

徽章支持多种颜色变体,用于表达不同含义。 徽章 徽章 徽章 徽章 徽章 徽章 徽章 徽章 徽章 徽章 徽章

尺寸

徽章提供四种尺寸,以匹配你的内容层级。 徽章 徽章 徽章 徽章

形状

可选择圆角或胶囊形徽章。 徽章 徽章

图标

为徽章添加图标,以提供更多上下文信息。 徽章 徽章 徽章

线框样式

使用线框样式,以获得更为低调的外观。 标记 标记 标记 标记

禁用状态

将徽章设置为禁用,以表示处于非活动或不可用状态。 徽章 徽章

内联用法

徽章可以自然地嵌入文本内容中。比如,此功能需要 Premium 订阅,或者此 API 端点返回 JSON 格式。

组合属性

组合多个属性来自定义徽章样式。 高级 已验证 测试版

属性

color
string
默认值:"gray"
徽章的颜色变体。选项:graybluegreenyelloworangeredpurplewhitesurfacewhite-destructivesurface-destructive
size
string
默认值:"md"
徽章的尺寸。选项:xssmmdlg
shape
string
默认值:"rounded"
徽章的形状。选项:roundedpill
icon
string
要显示的图标。可选值:
  • Font Awesome 图标名称 (如果你在 docs.json 中将 icons.library 属性 设置为 fontawesome)
  • Lucide 图标名称 (如果你在 docs.json 中将 icons.library 属性 设置为 lucide)
  • Tabler 图标名称 (如果你在 docs.json 中将 icons.library 属性 设置为 tabler)
  • 指向外部托管图标的 URL
  • 项目中图标文件的路径
  • 用花括号包裹的 SVG 代码
对于自定义 SVG 图标:
  1. 使用 SVGR 转换器 转换你的 SVG。
  2. 将 SVG 代码粘贴到 SVG 输入框。
  3. 从 JSX 输出框中复制完整的 <svg>...</svg> 元素。
  4. 用花括号包裹可用于 JSX 的 SVG 代码:icon={<svg ...> ... </svg>}
  5. 根据需要调整 heightwidth
iconType
string
Font Awesome 的图标样式。仅在使用 Font Awesome 图标时生效。可选值:regularsolidlightthinsharp-solidduotonebrands
stroke
boolean
默认值:"false"
以描边而非实心背景的样式显示徽章。
disabled
boolean
默认值:"false"
以禁用状态显示徽章,降低不透明度。
className
string
应用于徽章的其他 CSS 类名。