Badge

Badge is a small status indicator for another element.

Approved Rejected Warning Pending Draft Featured 3 NewOnline PrivateSecurity issue

preview

Usage#

import { Badge } from '@primereact/ui/badge';

<Badge />

Examples#

Basic#

A small overlay on another element to indicate a count or status.

Badge

basic-demo

import { Badge } from '@primereact/ui/badge';

export default function BasicDemo() {
    return (
        <div className="flex justify-center">
            <Badge>Badge</Badge>
        </div>
    );
}

Severity#

The severity property defines the visual style of a badge.

DefaultSecondarySuccessInfoWarningDangerContrast

severity-demo

import { Badge } from '@primereact/ui/badge';

export default function SeverityDemo() {
    return (
        <div className="flex flex-wrap justify-center gap-2">
            <Badge>Default</Badge>
            <Badge severity="secondary">Secondary</Badge>
            <Badge severity="success">Success</Badge>
            <Badge severity="info">Info</Badge>
            <Badge severity="warn">Warning</Badge>
            <Badge severity="danger">Danger</Badge>
            <Badge severity="contrast">Contrast</Badge>
        </div>
    );
}

Size#

Use the size property to change the size of a badge.

SmallDefaultLargeXLarge

size-demo

import { Badge } from '@primereact/ui/badge';

export default function SizeDemo() {
    return (
        <div className="flex flex-wrap items-center justify-center gap-2">
            <Badge size="small">Small</Badge>
            <Badge>Default</Badge>
            <Badge size="large">Large</Badge>
            <Badge size="xlarge">XLarge</Badge>
        </div>
    );
}

Overlay#

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

overlay-demo

import { Bell } from '@primeicons/react/bell';
import { Calendar } from '@primeicons/react/calendar';
import { Envelope } from '@primeicons/react/envelope';
import { Badge } from '@primereact/ui/badge';
import { OverlayBadge } from '@primereact/ui/overlaybadge';

export default function BasicDemo() {
    return (
        <div className="flex flex-wrap justify-center gap-6">
            <OverlayBadge>
                <Bell className="size-6!" />
                <Badge shape="circle">2</Badge>
            </OverlayBadge>
            <OverlayBadge>
                <Calendar className="size-6!" />
                <Badge shape="circle" severity="danger">
                    4
                </Badge>
            </OverlayBadge>
            <OverlayBadge>
                <Envelope className="size-6!" />
                <Badge shape="circle"></Badge>
            </OverlayBadge>
        </div>
    );
}

Button#

Buttons have built-in support for badges to display a badge inline.

button-demo

import { Badge } from '@primereact/ui/badge';
import { Button } from '@primereact/ui/button';
import { OverlayBadge } from '@primereact/ui/overlaybadge';
import { Bell } from '@primeicons/react/bell';
import { Users } from '@primeicons/react/users';

export default function ButtonDemo() {
    return (
        <div className="flex justify-center flex-wrap gap-4">
            <Button type="button">
                Emails
                <Badge severity="secondary" shape="circle">
                    8
                </Badge>
            </Button>

            <Button type="button" variant="outlined">
                <Users />
                Messages
                <Badge severity="contrast" shape="circle">
                    2
                </Badge>
            </Button>

            <OverlayBadge>
                <Button type="button" variant="outlined">
                    <Bell />
                </Button>
                <Badge severity="info" className="animate-pulse" />
            </OverlayBadge>
        </div>
    );
}

API#

Sub-Components#

See Primitive API for Badge and OverlayBadge component documentation.

Hooks#

See Headless API for useBadge hook documentation.

Accessibility#

See Badge Primitive for WAI-ARIA compliance details and keyboard support.