Badge

Show a small count or status mark next to an element.

Basic Usage

5

99+

<template>
  <bp-space :size="32">
    <bp-badge :count="5">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="100" :max-count="99">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="0">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
  </bp-space>
</template>

<script setup lang="ts">
import { IconNotification4Line } from "birdpaper-icon";
</script>

Status

Supports 5 statuses: gray - gray, primary - primary (default), success - success, warning - warning, danger - danger.

5

3

1

99

2

<template>
  <bp-space :size="32">
    <bp-badge :count="5" status="primary">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="3" status="success">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="1" status="warning">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="99" status="danger">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge :count="2" status="gray">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
  </bp-space>
</template>

<script setup lang="ts">
import { IconNotification4Line } from "birdpaper-icon";
</script>

Dot

Use dot for a simple status indicator.

<template>
  <bp-space :size="32">
    <bp-badge dot status="danger">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge dot status="success">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge dot status="warning">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge dot status="primary">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
  </bp-space>
</template>

<script setup lang="ts">
import { IconNotification4Line } from "birdpaper-icon";
</script>

Custom Text

Override the badge label with text.

NEW

HOT

<template>
  <bp-space :size="32">
    <bp-badge text="NEW">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
    <bp-badge text="HOT" status="danger">
      <IconNotification4Line fill="#595959" />
    </bp-badge>
  </bp-space>
</template>

<script setup lang="ts">
import { IconNotification4Line } from "birdpaper-icon";
</script>

Badge Props

text	Custom badge text; ignores count when set	String	-	-
count	Badge count	Number	-	-
max-count	Max display count; excess shows as max-count+	Number	99	-
dot	Whether to show as a dot	Boolean	-	-
status	Badge status type	String	primary	-
offset	Badge offset [top, right]	Array	[-2, -6]	-

Badge Slots

default

Content the badge attaches to

-

-