徽章 – Mintlify

使用徽章组件高亮显示状态指示器、版本标签或内联元数据，支持自定义颜色和悬停提示。

使用徽章显示状态指示器、标签或 metadata。将徽章内嵌于文本中，或作为独立元素使用。

基本徽章

徽章

<Badge>徽章</Badge>

颜色

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

徽章徽章徽章徽章徽章徽章徽章徽章徽章徽章徽章

<徽章 color="gray">徽章</徽章>
<徽章 color="blue">徽章</徽章>
<徽章 color="green">徽章</徽章>
<徽章 color="yellow">徽章</徽章>
<徽章 color="orange">徽章</徽章>
<徽章 color="red">徽章</徽章>
<徽章 color="purple">徽章</徽章>
<徽章 color="white">徽章</徽章>
<徽章 color="surface">徽章</徽章>
<徽章 color="white-destructive">徽章</徽章>
<徽章 color="surface-destructive">徽章</徽章>

尺寸

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

徽章徽章徽章徽章

<徽章 size="xs">徽章</徽章>
<徽章 size="sm">徽章</徽章>
<徽章 size="md">徽章</徽章>
<徽章 size="lg">徽章</徽章>

形状

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

徽章徽章

<徽章 shape="rounded">徽章</徽章>
<徽章 shape="pill">徽章</徽章>

图标

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

徽章徽章徽章

<徽章 icon="circle-check" color="green">徽章</徽章>
<徽章 icon="clock" color="orange">徽章</徽章>
<徽章 icon="ban" color="red">徽章</徽章>

线框样式

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

标记标记标记标记

<徽章 stroke color="blue">徽章</徽章>
<徽章 stroke color="green">徽章</徽章>
<徽章 stroke color="orange">徽章</徽章>
<徽章 stroke color="red">徽章</徽章>

禁用状态

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

徽章徽章

<徽章 disabled icon="lock" color="gray">徽章</徽章>
<徽章 disabled icon="lock" color="blue">徽章</徽章>

内联用法

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

此功能需要<Badge color="orange" size="sm">高级版</Badge>订阅。

组合属性

组合多个属性来自定义徽章样式。

高级已验证测试版

<Badge icon="star" color="blue" size="lg" shape="pill">高级版</Badge>
<Badge icon="check" stroke color="green" size="sm">已验证</Badge>
<Badge icon="badge-alert" color="orange" shape="rounded">测试版</Badge>

属性

colorstringdefault: gray

徽章的颜色变体。

选项：gray、blue、green、yellow、orange、red、 purple、white、surface、white-destructive、surface-destructive。

sizestringdefault: md

徽章的尺寸。

选项：xs、sm、md、lg。

shapestringdefault: rounded

徽章的形状。

选项：rounded、pill。

iconstring

要显示的图标。

可选值：

Font Awesome 图标名称 (如果你在 docs.json 中将 icons.library 属性设置为 fontawesome)
Lucide 图标名称 (如果你在 docs.json 中将 icons.library 属性设置为 lucide)
Tabler 图标名称 (如果你在 docs.json 中将 icons.library 属性设置为 tabler)
指向外部托管图标的 URL
项目中图标文件的路径
用花括号包裹的 SVG 代码

对于自定义 SVG 图标：

使用 SVGR 转换器转换你的 SVG。
将 SVG 代码粘贴到 SVG 输入框。
从 JSX 输出框中复制完整的 <svg>...</svg> 元素。
用花括号包裹可用于 JSX 的 SVG 代码：icon={<svg ...> ... </svg>}。
根据需要调整 height 和 width。

iconTypestring

Font Awesome 的图标样式。仅在使用 Font Awesome 图标时生效。

可选值：regular、solid、light、thin、sharp-solid、duotone、brands。

strokebooleandefault: false

以描边而非实心背景的样式显示徽章。

disabledbooleandefault: false

以禁用状态显示徽章，降低不透明度。

classNamestring

应用于徽章的其他 CSS 类名。

徽章

On this page