Badge

A visual indicator for a value or status descriptor for UI elements.

Usage

value

Badge can be used to display text and numbers.

new

<template>
  <div space-y-2>
    <div fscw gap-6>
      <pl-badge value="6">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="new">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-button>
        <span mr-1>button</span>
        <pl-badge value="6" />
      </pl-button>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-6>
      <pl-badge value="6">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="new">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-button>
        <span mr-1>button</span>
        <pl-badge value="6" />
      </pl-button>
    </div>
  </div>
</template>

state

You can define different states.

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-badge value="6" state="info">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="success">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="warning">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="danger">
        <pl-button>button</pl-button>
      </pl-badge>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-4>
      <pl-badge value="6" state="info">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="success">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="warning">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="danger">
        <pl-button>button</pl-button>
      </pl-badge>
    </div>
  </div>
</template>

max

You can customize the max value.The default max value is 99, which supports number and string.

<template>
  <div space-y-2>
    <div fscw gap-6>
      <pl-badge :value="6">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="66">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-button>
        <span mr-1>button</span>
        <pl-badge value="166" />
      </pl-button>
      <pl-button>
        <span mr-1>button</span>
        <pl-badge :max="200" value="166" />
      </pl-button>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-6>
      <pl-badge :value="6">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="66">
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-button>
        <span mr-1>button</span>
        <pl-badge value="166" />
      </pl-button>
      <pl-button>
        <span mr-1>button</span>
        <pl-badge :max="200" value="166" />
      </pl-button>
    </div>
  </div>
</template>

dot

Use a dot to mark content that needs to be noticed.You can use it by setting the dot attribute or not setting the value

<template>
  <div space-y-2>
    <div fscw gap-6>
      <pl-badge value="6" state="info" dot>
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="success" dot>
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="warning" dot>
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="danger" dot>
        <pl-button>button</pl-button>
      </pl-badge>
    </div>
  </div>
</template>

<template>
  <div space-y-2>
    <div fscw gap-6>
      <pl-badge value="6" state="info" dot>
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="success" dot>
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="warning" dot>
        <pl-button>button</pl-button>
      </pl-badge>
      <pl-badge value="6" state="danger" dot>
        <pl-button>button</pl-button>
      </pl-badge>
    </div>
  </div>
</template>

Props

Name	Type	Default	Description
value	`string` \| `number`	`undefined`	Display badge content.
color	`blue` \| `teal` \| `red` \| `yellow` \| `gray` \| `deepGray`	`teal`	Set badge color.
max	`string` \| `number`	`99`	Greater than `${max}`, display `${max}+`.
dot	`boolean`	`false`	Only a dot style.
hidden	`boolean`	`false`	Whether to display the number 0.

Slots

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

Badge ​

Usage ​

value ​

state ​

max ​

dot ​

Props ​

Slots ​