Chip

Chip represents entities using icons, labels and images.

Download #


npx volt-vue add Chip

Import #


import Chip from '@/volt/Chip.vue';

Basic #

A basic chip with a text is created with the label property. In addition when removable is added, a delete icon is displayed to remove a chip.

Action

Comedy

Mystery

Thriller


<template>
    <div class="card flex flex-wrap gap-2">
        <Chip label="Action" />
        <Chip label="Comedy" />
        <Chip label="Mystery" />
        <Chip label="Thriller" removable />
    </div>
</template>

<script setup lang="ts">
import Chip from '@/volt/Chip.vue';
</script>

Icon #

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

Apple

Facebook

Google

Microsoft

GitHub


<template>
    <div class="card flex flex-wrap gap-2">
        <Chip label="Apple" icon="pi pi-apple" />
        <Chip label="Facebook" icon="pi pi-facebook" />
        <Chip label="Google" icon="pi pi-google" />
        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
        <Chip label="GitHub" icon="pi pi-github" removable>
            <template #removeicon="{ removeCallback, keydownCallback }">
                <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
            </template>
        </Chip>
    </div>
</template>

<script setup lang="ts">
import Chip from '@/volt/Chip.vue';
</script>

Image #

The image property is used to display an image like an avatar.

Amy Elsner

Asiya Javayant

Onyama Limba

Xuxue Feng


<template>
    <div class="card flex flex-wrap gap-2">
        <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
        <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
        <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
        <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
    </div>
</template>

<script setup lang="ts">
import Chip from '@/volt/Chip.vue';
</script>

Template #

The default slot allows displaying custom content inside a chip.

PPRIME


<template>
    <div class="card">
        <Chip pt:root:class="py-0 pl-0 pr-4">
            <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
            <span class="font-medium">PRIME</span>
        </Chip>
    </div>
</template>

<script setup lang="ts">
import Chip from '@/volt/Chip.vue';
</script>