Badge

Badge is a small status indicator for another element.

Download #


npx volt-vue add Badge

Import #


import Badge from '@/volt/Badge.vue';
import OverlayBadge from '@/volt/OverlayBadge.vue';

Basic #

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

210


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

<script setup lang="ts">
import Badge from '@/volt/Badge.vue';
</script>

Severity #

Severity defines the variant of a badge.

2684935


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

<script setup lang="ts">
import Badge from '@/volt/Badge.vue';
</script>

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">
        <Badge value="8" size="xlarge" severity="success"></Badge>
        <Badge value="6" size="large" severity="warn"></Badge>
        <Badge value="4" severity="info"></Badge>
        <Badge value="2" size="small"></Badge>
    </div>
</template>

<script setup lang="ts">
import Badge from '@/volt/Badge.vue';
</script>

Overlay #

A badge can be added to any element by encapsulating the content with the OverlayBadge component.


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

<script setup lang="ts">
import OverlayBadge from '@/volt/OverlayBadge.vue';
</script>

Button #

Buttons have built-in badge support with the badge property.


<template>
    <div class="card flex justify-center flex-wrap gap-4">
        <Button type="button" label="Emails" badge="2" />
    </div>
</template>

<script setup lang="ts">
import Button from '@/volt/Button.vue';
</script>