Chip

Chip represents entities using icons, labels and images.

Action

Comedy

Mystery

Thriller

basic-demo

Usage#

import { Chip } from '@primereact/ui/chip';

<Chip>
    <Chip.Label>Chip</Chip.Label>
</Chip>

Examples#

Icon#

A font icon next to the label can be displayed with the className property.

Apple

Facebook

Google

Microsoft

GitHub

icon-demo

import { Chip } from '@primereact/ui/chip';

export default function IconDemo() {
    return (
        <div className="flex flex-wrap gap-2">
            <Chip.Root>
                <Chip.Icon className="pi pi-apple" />
                <Chip.Label>Apple</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Icon className="pi pi-facebook" />
                <Chip.Label>Facebook</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Icon className="pi pi-google" />
                <Chip.Label>Google</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Icon className="pi pi-microsoft" />
                <Chip.Label>Microsoft</Chip.Label>
                <Chip.RemoveIcon />
            </Chip.Root>
            <Chip.Root>
                <Chip.Icon className="pi pi-github" />
                <Chip.Label>GitHub</Chip.Label>
                <Chip.RemoveIcon asChild>
                    <i className="pi pi-minus-circle" />
                </Chip.RemoveIcon>
            </Chip.Root>
        </div>
    );
}

Image#

The Chip.Image is used to display an image like an avatar.

Amy Elsner

Asiya Javayant

Onyama Limba

Xuxue Feng

image-demo

import { Chip } from '@primereact/ui/chip';

export default function ImageDemo() {
    return (
        <div className="flex flex-wrap gap-2">
            <Chip.Root>
                <Chip.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
                <Chip.Label>Amy Elsner</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Image src="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
                <Chip.Label>Asiya Javayant</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Image src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
                <Chip.Label>Onyama Limba</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Image src="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" />
                <Chip.Label>Xuxue Feng</Chip.Label>
                <Chip.RemoveIcon />
            </Chip.Root>
        </div>
    );
}

Template#

Chip also allows displaying custom content inside a itself.

PPRIME

template-demo

import { Chip } from '@primereact/ui/chip';

export default function TemplateDemo() {
    return (
        <div>
            <Chip.Root className="py-0 pl-0 pr-4">
                <span className="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
                <span className="ml-2 font-medium">PRIME</span>
            </Chip.Root>
        </div>
    );
}

Accessibility#

Chip uses the label property as the default aria-label. Any attribute passed to the root element like aria-labelledby or aria-label can be used to override the default behavior. Removable chips are focusable with the tab key.

Keyboard Support#

Key	Function
backspace	Hides removable chip
enter	Hides removable chip