Badge

CBadge is a small status indicator for another element.

Basic

Content to display is defined with the value property or the default slot.

210

<template>
    <div class="card flex justify-center gap-2">
        <CBadge value="2"></CBadge>
        <CBadge>10</CBadge>
    </div>
</template>

Severity

Severity defines the variant of a badge.

TIP

primary is the default severity, it will be applied if no severity is specified.

267384935

<template>
    <div class="card flex flex-wrap justify-center gap-2">
        <CBadge value="2"></CBadge>
        <CBadge value="6" severity="secondary"></CBadge>
        <CBadge value="7" severity="tertiary"></CBadge>
        <CBadge value="3" severity="neutral"></CBadge>
        <CBadge value="8" severity="success"></CBadge>
        <CBadge value="4" severity="info"></CBadge>
        <CBadge value="9" severity="warn"></CBadge>
        <CBadge value="3" severity="danger"></CBadge>
        <CBadge value="5" severity="contrast"></CBadge>
    </div>
</template>

Size

Use the size property to customize the dimensions of a Badge.

8642

<template>
    <div class="card flex flex-wrap justify-center items-end gap-2">
        <CBadge value="8" size="xlarge" severity="success"></CBadge>
        <CBadge value="6" size="large" severity="warn"></CBadge>
        <CBadge value="4" severity="info"></CBadge>
        <CBadge value="2" size="small"></CBadge>
    </div>
</template>

Overlay

A CBadge can be added to any element by encapsulating the content with the COverlayBadge component.

2

4

<template>
    <div class="card flex flex-wrap justify-center gap-6">
        <COverlayBadge value="2">
            <i class="pi pi-bell" style="font-size: 2rem" />
        </COverlayBadge>
        <COverlayBadge value="4" severity="danger">
            <i class="pi pi-calendar" style="font-size: 2rem" />
        </COverlayBadge>
        <COverlayBadge severity="danger">
            <i class="pi pi-envelope" style="font-size: 2rem" />
        </COverlayBadge>
    </div>
</template>