PersonaBadge
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
previewvue
<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+
previewvue
<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
| 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 | ||