styledMisc

Chip

Chip represents entities using icons, labels and images.

What are you interested in?

You can select multiple answers.

Music

🎬

Movies

✈️

Travel

🍔

Food

Sports

🎮

Gaming

📚

Reading

Photography

💪

Fitness

💻

Technology

Art

🌿

Nature

🛍️

Shopping

👨‍🍳

Cooking

🐶

Pets

Cars

👕

Fashion

🔬

Science

preview

Usage#

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

<Chip.Root>
    <Chip.Start />
    <Chip.Label />
    <Chip.End>
        <Chip.Remove />
    </Chip.End>
</Chip.Root>

Examples#

Basic#

Displays compact information with an optional remove action.

GitHub

basic-demo

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

export default function BasicDemo() {
    return (
        <div className="flex items-center justify-center">
            <Chip.Root>
                <Chip.Start>
                    <Github />
                </Chip.Start>
                <Chip.Label>GitHub</Chip.Label>
            </Chip.Root>
        </div>
    );
}

Variant#

GitHub

variant-demo

import { Github, MinusCircle } from '@primeicons/react';
import { Chip } from '@primereact/ui/chip';

export default function VariantDemo() {
    return (
        <div className="flex items-center justify-center flex-wrap gap-2">
            <Chip.Root>
                <Chip.Start>
                    <Github />
                </Chip.Start>
                <Chip.Label>GitHub</Chip.Label>
                <Chip.End>
                    <Chip.Remove>
                        <MinusCircle />
                    </Chip.Remove>
                </Chip.End>
            </Chip.Root>
            <Chip.Root variant="outlined">
                <Chip.Start>
                    <Github />
                </Chip.Start>
                <Chip.Label>GitHub</Chip.Label>
                <Chip.End>
                    <Chip.Remove>
                        <MinusCircle />
                    </Chip.Remove>
                </Chip.End>
            </Chip.Root>
            <Chip.Root variant="text">
                <Chip.Start>
                    <Github />
                </Chip.Start>
                <Chip.Label>GitHub</Chip.Label>
                <Chip.End>
                    <Chip.Remove>
                        <MinusCircle />
                    </Chip.Remove>
                </Chip.End>
            </Chip.Root>
        </div>
    );
}

Start & End Elements#

Apple

Facebook

Google

Microsoft

GitHub

start-end-demo

import { Apple, Facebook, Github, Google, Microsoft, MinusCircle } from '@primeicons/react';
import { Chip } from '@primereact/ui/chip';

export default function StartEndDemo() {
    return (
        <div className="flex items-center justify-center flex-wrap gap-2">
            <Chip.Root>
                <Chip.Start>
                    <Apple />
                </Chip.Start>
                <Chip.Label>Apple</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Start>
                    <Facebook />
                </Chip.Start>
                <Chip.Label>Facebook</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Start>
                    <Google />
                </Chip.Start>
                <Chip.Label>Google</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Start>
                    <Microsoft />
                </Chip.Start>
                <Chip.Label>Microsoft</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Start>
                    <Github />
                </Chip.Start>
                <Chip.Label>GitHub</Chip.Label>
                <Chip.End>
                    <Chip.Remove>
                        <MinusCircle />
                    </Chip.Remove>
                </Chip.End>
            </Chip.Root>
        </div>
    );
}

With Avatar#

Amy Elsner

Asiya Javayant

Onyama Limba

Xuxue Feng

with-avatar-demo

import { TimesCircle } from '@primeicons/react';
import { Avatar } from '@primereact/ui/avatar';
import { Chip } from '@primereact/ui/chip';

export default function WithAvatarDemo() {
    return (
        <div className="flex items-center justify-center flex-wrap gap-2">
            <Chip.Root>
                <Chip.Start>
                    <Avatar.Root className="size-full" shape="circle">
                        <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
                        <Avatar.Fallback className="text-xs">AE</Avatar.Fallback>
                    </Avatar.Root>
                </Chip.Start>
                <Chip.Label>Amy Elsner</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Start>
                    <Avatar.Root className="size-full" shape="circle">
                        <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
                        <Avatar.Fallback className="text-xs">AJ</Avatar.Fallback>
                    </Avatar.Root>
                </Chip.Start>
                <Chip.Label>Asiya Javayant</Chip.Label>
            </Chip.Root>
            <Chip.Root>
                <Chip.Label>Onyama Limba</Chip.Label>
                <Chip.End>
                    <Avatar.Root className="size-full" shape="circle">
                        <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
                        <Avatar.Fallback className="text-xs">OL</Avatar.Fallback>
                    </Avatar.Root>
                </Chip.End>
            </Chip.Root>
            <Chip.Root>
                <Chip.Start>
                    <Avatar.Root className="size-full" shape="circle">
                        <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" />
                        <Avatar.Fallback className="text-xs">XF</Avatar.Fallback>
                    </Avatar.Root>
                </Chip.Start>
                <Chip.Label>Xuxue Feng</Chip.Label>
                <Chip.End>
                    <Chip.Remove>
                        <TimesCircle />
                    </Chip.Remove>
                </Chip.End>
            </Chip.Root>
        </div>
    );
}

Template#

Chip also allows displaying custom content inside itself.

Apple

Facebook

Google

Microsoft

GitHub

template-demo

import { Apple, Facebook, Github, Google, Microsoft, MinusCircle } from '@primeicons/react';
import { Chip } from '@primereact/ui/chip';

export default function TemplateDemo() {
    return (
        <div className="flex items-center justify-center flex-wrap gap-2">
            <Chip.Root className="bg-neutral-900 dark:bg-neutral-50 **:text-neutral-50 dark:**:text-neutral-900">
                <Chip.Start>
                    <Apple />
                </Chip.Start>
                <Chip.Label>Apple</Chip.Label>
            </Chip.Root>
            <Chip.Root className="bg-blue-50 dark:bg-blue-950 **:text-blue-700 dark:**:text-blue-300">
                <Chip.Start>
                    <Facebook />
                </Chip.Start>
                <Chip.Label>Facebook</Chip.Label>
            </Chip.Root>
            <Chip.Root className="bg-red-50 dark:bg-red-950 **:text-red-700 dark:**:text-red-300">
                <Chip.Start>
                    <Google />
                </Chip.Start>
                <Chip.Label>Google</Chip.Label>
            </Chip.Root>
            <Chip.Root className="bg-green-50 dark:bg-green-950 **:text-green-700 dark:**:text-green-300">
                <Chip.Start>
                    <Microsoft />
                </Chip.Start>
                <Chip.Label>Microsoft</Chip.Label>
            </Chip.Root>
            <Chip.Root className="bg-purple-50 dark:bg-purple-950 **:text-purple-700 dark:**:text-purple-300">
                <Chip.Start>
                    <Github />
                </Chip.Start>
                <Chip.Label>GitHub</Chip.Label>
                <Chip.End>
                    <Chip.Remove>
                        <MinusCircle />
                    </Chip.Remove>
                </Chip.End>
            </Chip.Root>
        </div>
    );
}

API#

Sub-Components#

See Primitive API for ChipRoot, ChipStart, ChipLabel, ChipEnd, and ChipRemove component documentation.

Hooks#

See Headless API for useChip hook documentation.

Accessibility#

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