Components

Chip

GitHub

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.

Avatar
<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.

AvatarAvatar
<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
{}
{}
size
"sm" | "2xs" | "xs" | "md" | "lg" | "xl" | "3xs" | "2xl" | "3xl"
config.default.size
position
"top-right" | "bottom-right" | "top-left" | "bottom-left"
config.default.position
color
string
config.default.color
text
string | number
null
inset
boolean
config.default.inset
show
boolean
true

Config

{
  "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
  }
}

Checkbox

Display a checkbox field.

CommandPalette

Add a customizable command palette to your app.