Usage
The Chip component wraps other components and displays a notification badge (usually a number or status indicator) in a corner.
<template>
<UChip text="5">
<UButton label="Notifications" />
</UChip>
</template>
Props
The element or component this component should render as.
Display some text or number inside the chip.
color
string
default:"'primary'"
The color variant of the chip (e.g., ‘primary’, ‘secondary’, ‘success’, ‘warning’, ‘error’).
The size of the chip. When used inside an AvatarGroup, the size is automatically inherited.
position
'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
default:"'top-right'"
The position of the chip relative to its container.
When true, keep the chip inside the component boundaries. Useful for rounded elements like avatars.
When true, render the chip with relative positioning instead of absolute.
Additional CSS classes to apply.
UI customization object for styling chip slots (root, base).
Models (v-model)
Control the visibility of the chip.
Slots
The component to wrap with the chip.
Custom content to display inside the chip badge, replacing the text prop.
Examples
Basic Chip
<template>
<UChip text="3">
<UButton icon="i-heroicons-bell" />
</UChip>
</template>
Positions
<template>
<div class="flex gap-4">
<UChip text="1" position="top-right">
<UButton label="Top Right" />
</UChip>
<UChip text="2" position="top-left">
<UButton label="Top Left" />
</UChip>
<UChip text="3" position="bottom-right">
<UButton label="Bottom Right" />
</UChip>
<UChip text="4" position="bottom-left">
<UButton label="Bottom Left" />
</UChip>
</div>
</template>
Colors
<template>
<div class="flex gap-4">
<UChip text="5" color="primary">
<UButton label="Primary" />
</UChip>
<UChip text="9" color="error">
<UButton label="Error" />
</UChip>
<UChip text="12" color="success">
<UButton label="Success" />
</UChip>
</div>
</template>
With Avatar (Inset)
<template>
<UChip text="3" :inset="true" position="bottom-right" color="success">
<UAvatar src="/avatar.jpg" alt="User" />
</UChip>
</template>
Custom Content
<template>
<UChip>
<template #content>
<span class="text-xs">NEW</span>
</template>
<UButton label="Featured" />
</UChip>
</template>
Controlled Visibility
<script setup>
const showChip = ref(true)
function dismissChip() {
showChip.value = false
}
</script>
<template>
<UChip v-model:show="showChip" text="5">
<UButton label="Notifications" @click="dismissChip" />
</UChip>
</template>
No Text (Status Indicator)
<template>
<UChip color="success">
<UAvatar src="/avatar.jpg" alt="Online User" />
</UChip>
</template>
Large Numbers
<template>
<div class="flex gap-4">
<UChip text="99+">
<UButton icon="i-heroicons-envelope" />
</UChip>
<UChip :text="1234">
<UButton icon="i-heroicons-bell" />
</UChip>
</div>
</template>
Standalone Mode
Use standalone mode when you want the chip to be part of the normal document flow:
<template>
<div class="flex items-center gap-2">
<span>Status:</span>
<UChip text="Online" :standalone="true" color="success" />
</div>
</template>
Different Sizes in Avatar Group
<template>
<UAvatarGroup size="lg">
<UChip text="3" color="error">
<UAvatar src="/avatar1.jpg" alt="User 1" />
</UChip>
<UAvatar src="/avatar2.jpg" alt="User 2" />
<UAvatar src="/avatar3.jpg" alt="User 3" />
</UAvatarGroup>
</template>
Use Cases
- Notification counts on buttons or icons
- Status indicators on avatars (online/offline)
- Unread message counts
- New feature badges
- Shopping cart item counts
- Activity indicators
Notes
- By default, the chip is positioned absolutely relative to its parent
- Use
inset prop for rounded containers like avatars to prevent the chip from overflowing
- When
show is false, the chip badge is hidden but the wrapped content remains visible
- The chip automatically inherits size from AvatarGroup context when nested