Badge

Maps to Arco Badge: value matches count and is-dot matches dot. See the Element Plus docs for props.

Counts & Limits

Max caps the displayed count; value also accepts text.

¹²

⁹⁹⁺

^new

<template>
  <el-badge :value="12"><el-button>Messages</el-button></el-badge>
  <el-badge :value="120" :max="99"><el-button>Inbox</el-button></el-badge>
  <el-badge value="new"><el-button>Updates</el-button></el-badge>
</template>

Dots & Status Colors

Combine is-dot and type for colored status dots.

A

B

C

<template>
  <el-badge is-dot><el-avatar>A</el-avatar></el-badge>
  <el-badge is-dot type="success"><el-avatar>B</el-avatar></el-badge>
  <el-badge is-dot type="primary"><el-avatar>C</el-avatar></el-badge>
</template>

Differences from Arco

No notable differences.