Badge

'use client';

import { Badge } from 'primereact/badge';

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

'use client';

import { Badge } from 'primereact/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>
    );
}

'use client';

import { Badge } from 'primereact/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>
    );
}

'use client';

import { Badge } from 'primereact/badge';

export default function BasicDemo() {
    return (
        <div className="flex flex-wrap justify-center gap-6">
            <Badge.Overlay>
                <i className="pi pi-bell" style={{ fontSize: '2rem' }} />
                <Badge shape="circle">2</Badge>
            </Badge.Overlay>
            <Badge.Overlay>
                <i className="pi pi-calendar" style={{ fontSize: '2rem' }} />
                <Badge shape="circle" severity="danger">
                    4
                </Badge>
            </Badge.Overlay>
            <Badge.Overlay>
                <i className="pi pi-envelope" style={{ fontSize: '2rem' }} />
                <Badge shape="circle"></Badge>
            </Badge.Overlay>
        </div>
    );
}

'use client';

import { Badge } from 'primereact/badge';
import { Button } from 'primereact/button';

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">
                <i className="pi pi-users" />
                Messages
                <Badge severity="contrast" shape="circle">
                    2
                </Badge>
            </Button>

            <Badge.Overlay>
                <Button type="button" variant="outlined">
                    <i className="pi pi-bell" />
                </Button>
                <Badge severity="info" className="animate-pulse" />
            </Badge.Overlay>
        </div>
    );
}