Badge

Used for displaying empty data state.

Basic Usage

Basic badge usage.

¹²

³

¹

²

^ok

⁹⁹⁺

<template>
  <b-space :size="24">
    <b-badge :value="12">
      <b-button>普通button</b-button>
    </b-badge>
    <b-badge :value="3">
      <b-button>回复</b-button>
    </b-badge>
    <b-badge :value="1" type="primary">
      <b-button>primarybadge</b-button>
    </b-badge>
    <b-badge :value="2" type="warning">
      <b-button>warningbadge</b-button>
    </b-badge>
    <b-badge value="ok" type="success">
      <b-button>successbadge</b-button>
    </b-badge>
    <b-badge :value="200" :max="99">
      <b-button>最大Number</b-button>
    </b-badge>
  </b-space>
</template>

CustomTipContent

Can display non-numeric badge content.

^hot

^new

红点模式

<template>
  <b-space :size="24">
    <b-badge value="hot">
      <b-button>热点</b-button>
    </b-badge>
    <b-badge value="new">
      <b-button>回复</b-button>
    </b-badge>
    <b-badge is-dot>红点模式</b-badge>
  </b-space>
</template>

Props

Parameter	Description	Type	Options	Default
value	Display value	string, number	—	—
max	Maximum value; exceeding the maximum will display '{max}+'	number	—	—
is-dot	Small dot	boolean	—	false
hidden	Hide badge	boolean	—	false
type	Type	string	primary / success / warning / danger / info	—