Badge

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>
    );
}

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>
    );
}

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

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

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>
    );
}