Components
Chip
Display a chip indicator on any component.
Usage
Wrap any component with the Chip component to display a chip indicator.
<template>
<UChip>
<UButton icon="i-heroicons-inbox" color="gray" />
</UChip>
</template>
Size
Use the size prop to change the size of the chip.
<template>
<UChip size="2xl">
<UButton icon="i-heroicons-inbox" color="gray" />
</UChip>
</template>
Color
Use the color prop to change the color of the chip.
<template>
<UChip color="red">
<UButton icon="i-heroicons-inbox" color="gray" />
</UChip>
</template>
Position
Use the position prop to change the position of the chip.
<template>
<UChip position="bottom-right">
<UButton icon="i-heroicons-inbox" color="gray" />
</UChip>
</template>
Text
Use the text prop to display text in the chip.
3
<template>
<UChip text="3" size="2xl">
<UButton icon="i-heroicons-inbox" color="gray" />
</UChip>
</template>
Show
Use the show prop to conditionally display the chip.
<script setup lang="ts">
const items = [{
name: 'messages',
icon: 'i-heroicons-chat-bubble-oval-left',
count: 3
}, {
name: 'notifications',
icon: 'i-heroicons-bell',
count: 0
}]
</script>
<template>
<div class="flex gap-3">
<UChip v-for="{ name, icon, count } in items" :key="name" :show="count > 0">
<UButton :icon="icon" color="gray" />
</UChip>
</div>
</template>
Inset
Use the inset prop to display the chip inside the component. This is useful when dealing with rounded components.
<template>
<UChip inset>
<UAvatar
src="https://avatars.githubusercontent.com/u/739984?v=4"
alt="Avatar"
/>
</UChip>
</template>
Slots
content
Use the #content slot to fully customize the chip.
<template>
<UChip size="md" position="bottom-right" inset :ui="{ base: '-mx-2 rounded-none ring-0', background: '' }">
<UAvatar
src="https://avatars.githubusercontent.com/u/739984?v=4"
alt="Avatar"
size="lg"
/>
<template #content>
<UAvatar
src="https://avatars.githubusercontent.com/in/80442?v=4"
alt="Avatar"
size="xs"
:ui="{ rounded: 'rounded-md' }"
class="shadow-md"
/>
</template>
</UChip>
</template>
Props
ui
{ wrapper?: string; base?: string; background?: string; position?: DeepPartial<{ 'top-right': string; 'bottom-right': string; 'top-left': string; 'bottom-left': string; }, any>; translate?: DeepPartial<...>; size?: DeepPartial<...>; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}size
"sm" | "3xs" | "2xs" | "xs" | "md" | "lg" | "xl" | "2xl" | "3xl"
config.default.sizetext
string | number
nullposition
"top-right" | "bottom-right" | "top-left" | "bottom-left"
config.default.positioncolor
string
config.default.colorinset
boolean
config.default.insetshow
boolean
trueConfig
{
wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap',
background: 'bg-{color}-500 dark:bg-{color}-400',
position: {
'top-right': 'top-0 right-0',
'bottom-right': 'bottom-0 right-0',
'top-left': 'top-0 left-0',
'bottom-left': 'bottom-0 left-0'
},
translate: {
'top-right': '-translate-y-1/2 translate-x-1/2 transform',
'bottom-right': 'translate-y-1/2 translate-x-1/2 transform',
'top-left': '-translate-y-1/2 -translate-x-1/2 transform',
'bottom-left': 'translate-y-1/2 -translate-x-1/2 transform'
},
size: {
'3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
'2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
'2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
'3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
},
default: {
size: 'sm',
color: 'primary',
position: 'top-right',
inset: false
}
}