Badge 标签

默认纯展示，不带交互。

语义变体

状态色自带 20% 透明底，亮暗两套主题共用一份定义。

<pt-badge>默认</pt-badge>
<pt-badge variant="secondary">中性</pt-badge>
<pt-badge variant="success">成功</pt-badge>
<pt-badge variant="warning">警告</pt-badge>
<pt-badge variant="destructive">危险</pt-badge>
<pt-badge variant="information">信息</pt-badge>
<pt-badge variant="ai">AI</pt-badge>

状态色（success / destructive / warning / information / ai）自带 20% 透明底， 亮暗两套主题共用一份定义，不需要各写一遍。

可点的标签

给了 href 内部渲染成 <a>；打开 interactive 内部渲染成 <button type="button">， 点击直接监听宿主的 click。两种形态静止时与纯展示长得一样，悬停 / 按下叠一层状态层， 键盘 Tab 聚焦时出焦点环。target="_blank" 且没给 rel 时自动补 noreferrer noopener。

可点的标签

interactive 渲染成 button，href 渲染成 a；悬停叠状态层、Tab 出焦点环。target="_blank" 自动补 rel。

<pt-badge interactive>全部</pt-badge>
<pt-badge interactive variant="secondary">筛选</pt-badge>
<pt-badge href="#api" variant="information">跳到 API</pt-badge>
<pt-badge href="https://www.ptengine.com" target="_blank" variant="ai">新窗口打开</pt-badge>

导航用 href，不要用 interactive + click 里跳转 —— 前者能中键新开、能复制链接、读屏报「链接」。 需要尺寸档位、禁用、加载态的操作，仍然用 pt-button 的 sm 档。

API

属性

属性	Attribute	类型	默认值	说明
href	href	string | undefined	—	给了 href 就渲染成 <a>，样式同 interactive（导航类标签用它，别用 interactive + click 跳转）
interactive	interactive	boolean	false	可点：内部渲染成 `<button type="button">`，带状态层、手型光标与焦点环。 点击直接监听宿主的原生 click（它会穿过影子边界冒泡上来）。给了 href 时视同打开。
rel	rel	string | undefined	—	仅在 href 存在时有效；target="_blank" 时若未指定会自动补 noreferrer noopener
target	target	"_blank" | "_parent" | "_self" | "_top" | undefined	—	仅在 href 存在时有效
variant	variant	"ai" | "default" | "destructive" | "information" | "secondary" | "success" | "warning"	'default'	语义变体。状态色（success / destructive / warning / information / ai）自带 20% 透明底，双主题通用

插槽

名称	说明
（默认）	文案
start	文案前的小图标（12px）

可定制的内部元素（::part()）

part	说明
base	内部的 span / a / button 元素