Badge - 徽标

Demo

更新日期

2026-09-25 UTC

品牌与内容

新上线精选已归档

分类与强调

实色晴空蓝精选集工具活动创作已完成

柔色晴空蓝精选集工具活动创作已完成

描边晴空蓝精选集工具活动创作已完成

状态与反馈

实色已发布测试中发布失败待审核

柔色已发布测试中发布失败待审核

描边已发布测试中发布失败待审核

vue

<script setup lang="ts">
const tones = [
  { value: 'blue', label: '晴空蓝' },
  { value: 'sun', label: '精选集' },
  { value: 'cyan', label: '工具' },
  { value: 'coral', label: '活动' },
  { value: 'pink', label: '创作' },
  { value: 'green', label: '已完成' },
] as const
const appearances = [
  { value: 'solid', label: '实色' },
  { value: 'soft', label: '柔色' },
  { value: 'outline', label: '描边' },
] as const
const statuses = [
  { value: 'success', label: '已发布' },
  { value: 'warning', label: '测试中' },
  { value: 'danger', label: '发布失败' },
  { value: 'info', label: '待审核' },
] as const
</script>

<template>
  <div class="ylf-badge-demo">
    <div class="ylf-badge-demo__group">
      <p>品牌与内容</p>
      <div class="ylf-badge-demo__row">
        <YlfBadge>新上线</YlfBadge>
        <YlfBadge variant="featured">
          精选
        </YlfBadge>
        <YlfBadge variant="neutral">
          已归档
        </YlfBadge>
      </div>
    </div>
    <div class="ylf-badge-demo__group">
      <p>分类与强调</p>
      <div v-for="appearance in appearances" :key="appearance.value" class="ylf-badge-demo__row">
        <span class="ylf-badge-demo__label">{{ appearance.label }}</span>
        <YlfBadge v-for="tone in tones" :key="tone.value" variant="accent" :tone="tone.value" :appearance="appearance.value">
          {{ tone.label }}
        </YlfBadge>
      </div>
    </div>
    <div class="ylf-badge-demo__group">
      <p>状态与反馈</p>
      <div v-for="appearance in appearances" :key="appearance.value" class="ylf-badge-demo__row">
        <span class="ylf-badge-demo__label">{{ appearance.label }}</span>
        <YlfBadge v-for="status in statuses" :key="status.value" :variant="status.value" :appearance="appearance.value">
          {{ status.label }}
        </YlfBadge>
      </div>
    </div>
  </div>
</template>

<style scoped>
.ylf-badge-demo {
  display: grid;
  gap: var(--ylf-space-6);
}

.ylf-badge-demo__group > p {
  margin: 0 0 var(--ylf-space-3);
  color: var(--ylf-c-text-2);
  font-size: 12px;
  line-height: 1.5;
}

.ylf-badge-demo__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ylf-space-3);
  margin-top: var(--ylf-space-3);
}

.ylf-badge-demo__label {
  width: 100%;
  color: var(--ylf-c-text-2);
  font-size: 12px;
}
</style>

默认以轻浅晴空蓝标记内容，明黄星芒点缀精选；分类和状态使用同一套高饱和实色，搭配经过对比度校验的前景文字。

选择徽标

brand：新内容、版本等日常品牌标记。
featured：精选、推荐等品牌标记，明黄星芒、浅黄底和中性文字。
accent：高饱和实色，默认晴空蓝，使用 tone 选择明黄、青、珊瑚橙、桃粉或鲜绿。
neutral：已归档、草稿等普通信息，无需暗示成功或错误。
success / warning / danger / info：分别使用鲜绿、明黄、珊瑚橙与青色实底，配套状态图形和文字。

徽标使用系统正文字体，默认 12px、500 字重，无阴影、发光或持续动画。前景、底色和描边使用配套 token，随明暗主题调整。使用简短明确的文字描述状态，颜色辅助识别。

晴空蓝实底在浅色主题使用白字、深色主题使用深蓝字；其余纯色标签使用同色相深色文字，保证各组填充与前景的对比度。状态与强调色共享 token，详见色彩与组件。

徽标用于展示信息；需要点击筛选或执行操作时，使用按钮等交互组件。

强调程度

同一个色彩角色可以选择 appearance="solid"（实色重点）、soft（柔色分类）或 outline（描边次级）。该属性只作用于 accent 与状态变体，其余变体沿用自身外观。

Props

属性	说明	类型	默认值
`variant`	语义与品牌用途	`featured \| accent \| brand \| neutral \| success \| warning \| danger \| info`	`brand`
`tone`	强调色，仅作用于 `accent`	`blue \| sun \| cyan \| coral \| pink \| green`	`blue`
`appearance`	`accent` 与状态变体的强调程度	`solid \| soft \| outline`	`solid`
`round`	胶囊圆角；关闭后使用小圆角	`boolean`	`true`

Slots

名称	说明
`default`	徽标内容

Badge - 徽标 ​

Demo ​

选择徽标 ​

强调程度 ​

Props ​