Badge UPDATED

Badges are used to inform the user of the status of specific data.

Basic usage

Badge use error theme color by default. You only need to set the value attribute to display the corresponding badge.

⁹⁹⁺

⁹^happy

<template>
  <div fscw gap-6>
    <OBadge o="primary" :value="100">
      <OButton type="primary" light>
        Primary
      </OButton>
    </OBadge>
    <OBadge :value="9">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="warning" value="happy">
      <OButton type="error" light>
        Custom Color
      </OButton>
    </OBadge>
    <OBadge o="info" dot :value="100">
      <OButton type="info" light>
        Only Dot
      </OButton>
    </OBadge>
  </div>
</template>

<template>
  <div fscw gap-6>
    <OBadge o="primary" :value="100">
      <OButton type="primary" light>
        Primary
      </OButton>
    </OBadge>
    <OBadge :value="9">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="warning" value="happy">
      <OButton type="error" light>
        Custom Color
      </OButton>
    </OBadge>
    <OBadge o="info" dot :value="100">
      <OButton type="info" light>
        Only Dot
      </OButton>
    </OBadge>
  </div>
</template>

Custom color

We have o variant to handle contextual colors.

Badge can also be used as a dot. You can set dot attribute to display a dot. And it has the highest priority.

<template>
  <div fscw gap-6>
    <OBadge o="primary" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="secondary" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="success" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="warning" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="error" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="info" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="#dedede" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
  </div>
</template>

<template>
  <div fscw gap-6>
    <OBadge o="primary" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="secondary" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="success" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="warning" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="error" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="info" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="#dedede" dot>
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
  </div>
</template>

Values

Badge can display a number or a string. If the value is greater than 99, it will be displayed as 99+. Or you can set max attribute to change the maximum value.

⁹⁹

⁹⁹⁺

¹⁹⁹

⁹⁹⁹⁺

<template>
  <div fscw gap-6>
    <OBadge o="primary" :value="99">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="primary" :value="100">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge :max="999" :value="199">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge :max="999" :value="1000">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
  </div>
</template>

<template>
  <div fscw gap-6>
    <OBadge o="primary" :value="99">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge o="primary" :value="100">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge :max="999" :value="199">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge :max="999" :value="1000">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
  </div>
</template>

If the value is 0, it will not be displayed. You can set showZero attribute to display 0.

⁰

<template>
  <div fscw gap-6>
    <OBadge :value="0">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge show-zero :value="0">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
  </div>
</template>

<template>
  <div fscw gap-6>
    <OBadge :value="0">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
    <OBadge show-zero :value="0">
      <o-avatar class="o-gray dark-o-#3a3a3c" rounded />
    </OBadge>
  </div>
</template>

Badge Props

Name	Type	Default	Description
value	`string` \| `number`	`undefined`	Display badge content.
max	`number`	`99`	Greater than `${max}`, display `${max}+`.
dot	`boolean`	`false`	Only a dot style.
showZero	`boolean`	`false`	Whether to display the number 0.

Badge Slots

Name	Parameters	Description
default	`()`	Badge's content.

Badge UPDATED #

Basic usage #

Custom color #

Values #

Badge Props #