Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nuxt/ui/llms.txt

Use this file to discover all available pages before exploring further.

​
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

​
as
any
default:"'div'"
The element or component this component should render as.
​
text
string | number
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’).
​
size
string
default:"'md'"
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.
​
inset
boolean
default:"false"
When true, keep the chip inside the component boundaries. Useful for rounded elements like avatars.
​
standalone
boolean
default:"false"
When true, render the chip with relative positioning instead of absolute.
​
class
any
Additional CSS classes to apply.
​
ui
object
UI customization object for styling chip slots (root, base).

​
Models (v-model)

​
v-model:show
boolean
default:"true"
Control the visibility of the chip.

​
Slots

​
default
{}
The component to wrap with the chip.
​
content
{}
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

Build docs developers (and LLMs) love

Get started for freeTalk to us