Skip to content
On this page

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.

25preview
vue
<template>
  <p-badge>25</p-badge>
</template>

Colors

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

251999+7K6
preview
vue
<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>

Variants

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

257K999+
preview
vue
<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
vue
<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
vue
<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

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

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

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

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

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

API

Props

PropsTypeDefaultDescription
colorString-Badge color variant, valid value is primary, info, success, warning and danger
variantStringdefaultBadge variant, valid value is default, light and inverse. If need badge in default variant, just leave badge without setting up the variant.

Slots

NameDescription
defaultContent to place in badge

Events

NameArgumentsDescription
There is no event here

Released under the MIT License.