示例

徽章是微小的、静态的显示组件，用于为其他元素添加上下文。它们可用于导航、按钮等，以提供计数器或标签。徽章通过使用相对字体大小和em单位来缩放，以匹配直接父元素的大小。

徽章有三种类型：实心（默认）、微妙和轮廓。

新新新

HTML

<span class="badge theme-primary">New</span>
<span class="badge badge-subtle theme-primary">New</span>
<span class="badge badge-outline theme-primary">New</span>

标题

徽章会根据父元素的font-size进行调整。

示例标题新

HTML

<h1>Example heading <span class="badge">New</span></h1>
<h2>Example heading <span class="badge">New</span></h2>
<h3>Example heading <span class="badge">New</span></h3>
<h4>Example heading <span class="badge">New</span></h4>
<h5>Example heading <span class="badge">New</span></h5>
<h6>Example heading <span class="badge">New</span></h6>

按钮

徽章可以用作链接或按钮的一部分，以提供计数器。

HTML

<button type="button" class="btn-solid theme-primary">
  Notifications <span class="badge theme-danger">4</span>
</button>

请注意，根据徽章的使用方式，它们可能会让使用屏幕阅读器和类似辅助技术的用户感到困惑。虽然徽章的样式提供了其用途的视觉提示，但这些用户只会看到徽章的内容。根据具体情况，这些徽章可能看起来像句子、链接或按钮末尾的随机附加词或数字。

除非上下文很清楚（例如“通知”示例，其中可以理解“4”表示通知的数量），否则应考虑在视觉上隐藏的一段附加文本中包含额外的上下文。

定位

使用工具来修改.badge并将其放置在链接或按钮的角落。

HTML

<button type="button" class="btn-solid theme-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill border border-bg theme-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

你也可以用几个没有计数的工具类替换.badge类，以得到一个更通用的指示器。

HTML

<button type="button" class="btn-solid theme-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-bg rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

变体

使用上下文.theme-{color}类将语义主题颜色应用于徽章。

主要的口音成功危险警告信息反向次要

HTML

<span class="badge theme-primary">Primary</span>
<span class="badge theme-accent">Accent</span>
<span class="badge theme-success">Success</span>
<span class="badge theme-danger">Danger</span>
<span class="badge theme-warning">Warning</span>
<span class="badge theme-info">Info</span>
<span class="badge theme-inverse">Inverse</span>
<span class="badge theme-secondary">Secondary</span>

主要口音成功危险警告信息反向次要

HTML

<span class="badge badge-subtle theme-primary">Primary</span>
<span class="badge badge-subtle theme-accent">Accent</span>
<span class="badge badge-subtle theme-success">Success</span>
<span class="badge badge-subtle theme-danger">Danger</span>
<span class="badge badge-subtle theme-warning">Warning</span>
<span class="badge badge-subtle theme-info">Info</span>
<span class="badge badge-subtle theme-inverse">Inverse</span>
<span class="badge badge-subtle theme-secondary">Secondary</span>

主要口音成功危险警告信息反向次要

HTML

<span class="badge badge-outline theme-primary">Primary</span>
<span class="badge badge-outline theme-accent">Accent</span>
<span class="badge badge-outline theme-success">Success</span>
<span class="badge badge-outline theme-danger">Danger</span>
<span class="badge badge-outline theme-warning">Warning</span>
<span class="badge badge-outline theme-info">Info</span>
<span class="badge badge-outline theme-inverse">Inverse</span>
<span class="badge badge-outline theme-secondary">Secondary</span>

可访问性提示：使用颜色传达含义

仅使用颜色来增加意义只提供视觉提示，这不会传达给使用辅助技术（如屏幕阅读器）的用户。请确保意义从内容本身即可明显体现（例如，可见的文本以及 足够的 颜色对比) 或通过替代方式包含，例如通过隐藏的附加文本 .visually-hidden 类

CSS

变量

徽章在.badge上使用本地 CSS 变量进行实时自定义。CSS 变量的值是从每个组件独有的 Sass map生成，并应用于上述类。

scss/_徽章.scss

$badge-tokens: defaults(
  (
    --badge-gap: .375em,
    --badge-padding-x: .625em,
    --badge-padding-y: .25em,
    --badge-font-size: clamp(12px, .75em, .75em),
    --badge-font-weight: var(--font-weight-semibold),
    --badge-color: inherit,
    --badge-bg: var(--bg-2),
    --badge-border-width: var(--border-width),
    --badge-border-color: transparent,
    --badge-border-radius: var(--radius-7),
  ),
  $badge-tokens
);

徽标

本页目录

示例

标题

示例标题新