Badge

Label of the thing they're quantifying, such as the number of notification/document received.

Usage

Basic Usage

Default color of badge are black.

252preview

<template>
  <p-badge>25</p-badge>
  <p-badge>
    <pi-signature-16 />
    <span>2</span>
  </p-badge>
</template>

Colors

Badge available in 4 different colors. There are primary, info, success, warning and danger.

251999+7K6

preview

<template>
  <p-badge color="primary">25</p-badge>
  <p-badge color="info">1</p-badge>
  <p-badge color="success">999+</p-badge>
  <p-badge color="warning">7K</p-badge>
  <p-badge color="danger">6</p-badge>
</template>

It's possible to make customizable and or optional color refers to what state the user is in or objects being tagged by using default color Badge with variables or class.

Custom Color

2579999+

preview

<template>
  <p-badge class="bg-gold-40">25</p-badge>
  <p-badge class="text-yellow-30">79</p-badge>
  <p-badge 
    class="bg-purple-0 text-purple-40 dark:bg-purple-50 dark:text-purple-20">
    999+
  </p-badge>
</template>

Variants

Badge has 3 variants namely default, light and inverse. When variant is not set, badge will looks as a default

257K999+

preview

<template>
  <p-badge>25</p-badge>
  <p-badge variant="light">7K</p-badge>
  <p-badge variant="inverse">999+</p-badge>
</template>

Sample Light Variant

2517K999+6preview

<template>
  <p-badge variant="light" color="primary">25</p-badge>
  <p-badge variant="light" color="info">1</p-badge>
  <p-badge variant="light" color="success">7K</p-badge>
  <p-badge variant="light" color="warning">999+</p-badge>
  <p-badge variant="light" color="danger">6</p-badge>
</template>

Sample Inverse Variant

2517K999+6preview

<template>
  <p-badge variant="inverse" color="primary">25</p-badge>
  <p-badge variant="inverse" color="info">1</p-badge>
  <p-badge variant="inverse" color="success">7K</p-badge>
  <p-badge variant="inverse" color="warning">999+</p-badge>
  <p-badge variant="inverse" color="danger">6</p-badge>
</template>

Variables

Badge use local CSS variables for enhanced real-time customization. Use this variable for level color customization.

.badge.badge--default

--p-bg-variant-default: theme(backgroundColor.inverse);
--p-bg-dark-variant-default: theme(backgroundColor.dark.inverse);

.badge.badge--variant-inverse.badge--default

--p-color-variant-inverse: theme(textColor.subtle);
--p-color-dark-variant-inverse: theme(textColor.dark.subtle);

.badge.badge--variant-light.badge--default

--p-bg-variant-light: theme(backgroundColor.emphasis-alpha);
--p-bg-dark-variant-light: theme(backgroundColor.dark.emphasis-alpha);

API

Props

Props	Type	Default	Description
color	String	-	Badge color variant, valid value is primary, info, success, warning and danger
variant	String	default	Badge variant, valid value is default, light and inverse. If need badge in default variant, just leave badge without setting up the variant.

Slots

Name	Description
default	Content to place in badge

Events

Name	Arguments	Description
There is no event here