Chip
Usage
Wrap any component with a Chip to display an indicator.
<template>
<UChip>
<UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
</UChip>
</template>
Color
Use the color prop to change the color of the Chip.
<template>
<UChip color="gray">
<UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
</UChip>
</template>
Size
Use the size prop to change the size of the Chip.
<template>
<UChip size="3xl">
<UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
</UChip>
</template>
Text
Use the text prop to set the text of the Chip.
<template>
<UChip :text="5" size="3xl">
<UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
</UChip>
</template>
Position
Use the position prop to change the position of the Chip.
<template>
<UChip position="bottom-left">
<UButton icon="i-heroicons-envelope" color="gray" variant="subtle" />
</UChip>
</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://github.com/benjamincanac.png" />
</UChip>
</template>
Standalone
Use the standalone prop alongside the inset prop to display the Chip inline.
<template>
<UChip standalone inset />
</template>
Examples
Control visibility
You can control the visibility of the Chip using the show prop.
<script setup lang="ts">
const statuses = ['online', 'away', 'busy', 'offline']
const status = ref(statuses[0])
const color = computed(() => status.value ? { online: 'green', away: 'amber', busy: 'red', offline: 'gray' }[status.value] as any : 'online')
const show = computed(() => status.value !== 'offline')
// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
setInterval(() => {
if (status.value) {
status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length]
}
}, 1000)
})
</script>
<template>
<UChip :color="color" :show="show" inset>
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
</UChip>
</template>
offline.API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
show |
| |
text |
Display some text inside the chip. | |
color |
|
|
size |
|
|
position |
|
|
inset |
|
When |
standalone |
|
When |
ui |
|
Slots
| Slot | Type |
|---|---|
default |
|
content |
|
Theme
export default defineAppConfig({
ui: {
chip: {
slots: {
root: 'relative inline-flex items-center justify-center shrink-0',
base: 'rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap'
},
variants: {
color: {
primary: 'bg-primary-500 dark:bg-primary-400',
error: 'bg-error-500 dark:bg-error-400',
red: 'bg-red-500 dark:bg-red-400',
orange: 'bg-orange-500 dark:bg-orange-400',
amber: 'bg-amber-500 dark:bg-amber-400',
yellow: 'bg-yellow-500 dark:bg-yellow-400',
lime: 'bg-lime-500 dark:bg-lime-400',
green: 'bg-green-500 dark:bg-green-400',
emerald: 'bg-emerald-500 dark:bg-emerald-400',
teal: 'bg-teal-500 dark:bg-teal-400',
cyan: 'bg-cyan-500 dark:bg-cyan-400',
sky: 'bg-sky-500 dark:bg-sky-400',
blue: 'bg-blue-500 dark:bg-blue-400',
indigo: 'bg-indigo-500 dark:bg-indigo-400',
violet: 'bg-violet-500 dark:bg-violet-400',
purple: 'bg-purple-500 dark:bg-purple-400',
fuchsia: 'bg-fuchsia-500 dark:bg-fuchsia-400',
pink: 'bg-pink-500 dark:bg-pink-400',
rose: 'bg-rose-500 dark:bg-rose-400',
gray: 'bg-gray-500 dark:bg-gray-400'
},
size: {
'3xs': 'h-[4px] min-w-[4px] text-[4px]',
'2xs': 'h-[5px] min-w-[5px] text-[5px]',
xs: 'h-[6px] min-w-[6px] text-[6px]',
sm: 'h-[7px] min-w-[7px] text-[7px]',
md: 'h-[8px] min-w-[8px] text-[8px]',
lg: 'h-[9px] min-w-[9px] text-[9px]',
xl: 'h-[10px] min-w-[10px] text-[10px]',
'2xl': 'h-[11px] min-w-[11px] text-[11px]',
'3xl': 'h-[12px] min-w-[12px] text-[12px]'
},
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'
},
inset: {
false: ''
},
standalone: {
false: 'absolute'
}
},
compoundVariants: [
{
position: 'top-right',
inset: false,
class: '-translate-y-1/2 translate-x-1/2 transform'
},
{
position: 'bottom-right',
inset: false,
class: 'translate-y-1/2 translate-x-1/2 transform'
},
{
position: 'top-left',
inset: false,
class: '-translate-y-1/2 -translate-x-1/2 transform'
},
{
position: 'bottom-left',
inset: false,
class: 'translate-y-1/2 -translate-x-1/2 transform'
}
],
defaultVariants: {
size: 'md',
color: 'primary',
position: 'top-right'
}
}
}
})