Indicator

Count or dot badge anchored on any element

A small square plate pinned to a corner of whatever it wraps — a count on an inbox button, a presence dot on an avatar. value as a number shows the count (max, default 99, turns 120 into "99+"); true shows a dot; 0 or false hides it. position names a physical corner and stays put in RTL, like every side-named prop. inline is on by default for icons and buttons; turn it off to wrap a block.

Give it a label that says what the number means — "3 unread", "online" — and keep it in step with value: it is read from a status region that stays in the page, so a change is announced in full ("4 unread", not "4"), including one that appears from zero. Without one the badge is decorative and hidden from screen readers, because a bare "3" read after a button name means nothing. For a label that sits in the text rather than on a corner, use Badge.

Basic

33 unread99+120 alertsMKonline

<script setup lang="ts">
import { ref } from "vue";
import { BlessAvatar, BlessButton, BlessIndicator } from "blessing-ui";
const unread = ref(3);
</script>

<template>
  <div class="row" style="gap: 24px">
    <BlessIndicator :value="unread" :label="`${unread} unread`"
      ><BlessButton variant="outline" @click="unread++">Inbox</BlessButton></BlessIndicator
    >
    <BlessIndicator :value="120" color="danger" label="120 alerts"
      ><BlessButton variant="outline">Alerts</BlessButton></BlessIndicator
    >
    <BlessIndicator :value="true" color="success" position="bottom-right" label="online"
      ><BlessAvatar name="Megumi Kato"
    /></BlessIndicator>
    <BlessIndicator :value="0" label="0 drafts"
      ><BlessButton variant="ghost">Drafts</BlessButton></BlessIndicator
    >
  </div>
</template>

Usage

import { BlessIndicator } from "blessing-ui";

API

Props

Name	Type	Default	Description
value	number | boolean	—	number → count badge, true → dot, falsy → hidden
max	number	99
color	"text" | "accent" | "danger" | "warning" | "success" | "info"	"text"
position	"top-right" | "top-left" | "bottom-right" | "bottom-left"	"top-right"
inline	boolean	true	wrapped element is inline (icon) vs block
label	string	—

Slots

Name	Scope	Description
default	—