Badge

Default

Typically displaying unread messages count. You can use it on buttons,text,avatars,etc.

Code copied

<template>
  <div class="center">
    <s-badge :value="12" class="item">
      <s-button color="warn">comment</s-button>
    </s-badge>
    <s-badge :value="2" type="warn" class="item">
      <s-button shape="square">square</s-button>
    </s-badge>
    <s-badge :value="2" class="item" color="#ccc"> text </s-badge>
    <s-badge :value="7" class="item">
      <s-avatar>
        <img src="/avatars/avatar-5.png" alt="" />
      </s-avatar>
    </s-badge>
    <s-badge :value="3" class="item">
      <s-avatar shape="square" color="#ccc" />
    </s-badge>
  </div>
</template>

<style lang="scss" scoped>
.item {
  margin: 10px;
}
</style>

Max Value

Set max prop to handle overflow situation.

The max value is defined by property max which is a Number. Note that it only works when value is also a Number.

Code copied

<template>
  <div class="center">
    <s-badge :value="100" :max="19" type="primary" class="item">
      <s-button>comment</s-button>
    </s-badge>
    <s-badge :value="100" :max="99" class="item">
      <s-button color="warn" shape="square">comment</s-button>
    </s-badge>
    <s-badge :value="10" :max="9" class="item">
      <s-avatar shape="square" color="#ccc" />
    </s-badge>
  </div>
</template>

<style lang="scss" scoped>
.item {
  margin: 20px;
}
</style>

Customizing content

Displays text content other than numbers.

When value is a String, it can display customized text.

Code copied

<template>
  <div class="center">
    <s-badge value="hot" class="item">
      <s-button color="warn">comment</s-button>
    </s-badge>
    <s-badge value="new" class="item">
      <s-button shape="square">square</s-button>
    </s-badge>
  </div>
</template>

<style lang="scss" scoped>
.item {
  margin: 20px;
}
</style>

Red Dot

Use a red dot to mark content that needs to be noticed.

Use the attribute is-dot. It is a Boolean.

Code copied

<template>
  <div class="center">
    <s-badge :value="2" is-dot type="warn" class="item">
      <s-button shape="square">square</s-button>
    </s-badge>
    <s-badge :value="2" is-dot class="item"> text </s-badge>
    <s-badge :value="7" is-dot class="item">
      <s-avatar>
        <img src="/avatars/avatar-5.png" alt="" />
      </s-avatar>
    </s-badge>
    <s-badge :value="3" is-dot class="item">
      <s-avatar shape="square" color="#ccc" />
    </s-badge>
  </div>
</template>

<style lang="scss" scoped>
.item {
  margin: 10px;
}
</style>

Offset

Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.

Code copied

<template>
  <div class="center">
    <s-badge :value="2" :offset="[-80, 0]" type="warn" class="item">
      <s-button shape="square">square</s-button>
    </s-badge>
    <s-badge :value="7" class="item">
      <s-avatar>
        <img src="/avatars/avatar-5.png" alt="" />
      </s-avatar>
    </s-badge>
    <s-badge :value="3" :offset="[-20, 20]" class="item">
      <s-avatar shape="square" color="#ccc" />
    </s-badge>
  </div>
</template>

<style lang="scss" scoped>
.item {
  margin: 10px;
}
</style>

Processing

Use processing for live or updating states. It adds a repeating pulse around the badge; compare it with the normal state below.

Code copied

<template>
  <div class="processing-demo">
    <div class="processing-demo__group">
      <span class="processing-demo__label">{{ labels.normal }}</span>
      <div class="processing-demo__badges">
        <s-badge :value="7">
          <s-avatar>
            <img src="/avatars/avatar-5.png" alt="" />
          </s-avatar>
        </s-badge>
        <s-badge is-dot type="success">
          <span class="processing-demo__target">{{ labels.sync }}</span>
        </s-badge>
      </div>
    </div>

    <div class="processing-demo__group is-processing">
      <span class="processing-demo__label">{{ labels.processing }}</span>
      <div class="processing-demo__badges">
        <s-badge :value="7" processing>
          <s-avatar>
            <img src="/avatars/avatar-5.png" alt="" />
          </s-avatar>
        </s-badge>
        <s-badge is-dot processing type="success">
          <span class="processing-demo__target">{{ labels.sync }}</span>
        </s-badge>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const labels = computed(() =>
  route.path.startsWith('/zh/')
    ? { normal: '普通状态', processing: '处理中', sync: '数据同步' }
    : { normal: 'Normal', processing: 'Processing', sync: 'Data sync' },
)
</script>

<style scoped>
.processing-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.processing-demo__group {
  display: grid;
  min-width: 180px;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--sax-radius-lg);
  background: rgba(var(--sax-theme-color), 0.035);
}

.processing-demo__group.is-processing {
  background: rgba(var(--sax-primary), 0.055);
  box-shadow: 0 10px 28px rgba(var(--sax-primary), 0.1);
}

.processing-demo__label {
  color: rgba(var(--sax-theme-color), 0.66);
  font-size: 12px;
  font-weight: 700;
}

.processing-demo__badges {
  display: flex;
  align-items: center;
  gap: 34px;
}

.processing-demo__target {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--sax-radius-md);
  background: rgba(var(--sax-theme-color), 0.06);
  color: rgba(var(--sax-theme-color), 0.78);
  font-size: 13px;
}
</style>

Controlled visibility

Set hidden prop to control the visibility of the badge.

Code copied

<template>
  <div class="center">
    <s-badge :value="3" :hidden="hidden" processing class="item">
      <s-avatar shape="square" color="#ccc" />
    </s-badge>

    <s-switch v-model="hidden" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const hidden = ref(false)
</script>

<style lang="scss" scoped>
.item {
  margin: 20px;
}
</style>

Show Zero

Set show-zero prop to display zero.According to reason, it is hidden.

Code copied

<template>
  <div class="center">
    <s-badge :value="0" class="item">
      <s-avatar shape="square" color="#ccc" />
    </s-badge>
    <s-badge :value="0" :show-zero="show" class="item">
      <s-avatar shape="square" color="#ccc" />
    </s-badge>
    <s-switch v-model="show" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
</script>

<style lang="scss" scoped>
.item {
  margin: 20px;
}
</style>

API