Badge

Last updated

2026-10-04 UTC

Demo

badge/demo.vue

Brand and content

New Featured Archived

Categories and emphasis

SolidSky blueFeaturedToolsEventsCreationCompleted

SoftSky blueFeaturedToolsEventsCreationCompleted

OutlineSky blueFeaturedToolsEventsCreationCompleted

States and feedback

SolidPublishedTestingPublish failedPending review

SoftPublishedTestingPublish failedPending review

OutlinePublishedTestingPublish failedPending review

<script setup lang="ts">
const tones = [
  { value: 'blue', label: 'Sky blue' },
  { value: 'sun', label: 'Featured' },
  { value: 'cyan', label: 'Tools' },
  { value: 'coral', label: 'Events' },
  { value: 'pink', label: 'Creation' },
  { value: 'green', label: 'Completed' },
] as const
const appearances = [
  { value: 'solid', label: 'Solid' },
  { value: 'soft', label: 'Soft' },
  { value: 'outline', label: 'Outline' },
] as const
const statuses = [
  { value: 'success', label: 'Published' },
  { value: 'warning', label: 'Testing' },
  { value: 'danger', label: 'Publish failed' },
  { value: 'info', label: 'Pending review' },
] as const
</script>

<template>
  <div class="ylf-badge-demo">
    <div class="ylf-badge-demo__group">
      <p>Brand and content</p>
      <div class="ylf-badge-demo__row">
        <YlfBadge>New</YlfBadge>
        <YlfBadge variant="featured">
          Featured
        </YlfBadge>
        <YlfBadge variant="neutral">
          Archived
        </YlfBadge>
      </div>
    </div>
    <div class="ylf-badge-demo__group">
      <p>Categories and emphasis</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>States and feedback</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>

Light sky blue labels mark everyday content; a sun star marks featured content. Categories and states use vivid fills with contrast checked foregrounds.

Choosing a badge

• brand: everyday brand markers such as new content or versions.
• featured: recommendations, with a yellow star, pale background and neutral text.
• accent: vivid solids, default sky blue; choose sun, cyan, coral, pink or green through tone.
• neutral: ordinary information such as archived content or drafts.
• success / warning / danger / info: green, sun yellow, coral and cyan, with status symbols and text.

Badges use the body font at 12px/500 by default, without shadows or continuous animation. Foreground, fill and border tokens adapt together across themes. Use short, explicit labels; color supplements meaning.

Sky blue pairs white text in light mode with dark blue in dark mode. Other solid badges pair darker same-hue text. See Shared status colors.

Badges display information. Use an interactive component for filtering or actions.

Emphasis

Choose appearance="solid", soft or outline for accent/status variants. Other variants retain their own appearance.

Props

Prop	Description	Type	Default
variant	Semantic or brand role	featured | accent | brand | neutral | success | warning | danger | info	brand
tone	Accent hue, only for accent	blue | sun | cyan | coral | pink | green	blue
appearance	Emphasis for accent and status variants	solid | soft | outline	solid
round	Pill radius; small radius when false	boolean	true

Tone defaults to blue and affects accent only. Featured always uses feature tokens. Legacy aurora aliases featured.

Slots

Name	Description
default	Badge content