ui/docs/content/2.components/chip.md

description, links

description	links
Display a chip indicator on any component.	label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Chip.vue

Usage

Wrap any component with the Chip component to display a chip indicator.

::component-card

code: >-

---

#default :u-button{icon="i-heroicons-inbox" color="gray"} ::

Size

Use the size prop to change the size of the chip.

::component-card

props: size: '2xl' code: >-

<UButton icon="i-heroicons-inbox" color="gray" />

---

#default :u-button{icon="i-heroicons-inbox" color="gray"} ::

Color

Use the color prop to change the color of the chip.

::component-card

props: color: 'red' code: >-

<UButton icon="i-heroicons-inbox" color="gray" />

---

#default :u-button{icon="i-heroicons-inbox" color="gray"} ::

Position

Use the position prop to change the position of the chip.

::component-card

props: position: 'bottom-right' code: >-

<UButton icon="i-heroicons-inbox" color="gray" />

---

#default :u-button{icon="i-heroicons-inbox" color="gray"} ::

Text

Use the text prop to display text in the chip.

::component-card

props: text: '3' size: '2xl' excludedProps:

• size code: >-

---

#default :u-button{icon="i-heroicons-inbox" color="gray"} ::

Show

Use the show prop to conditionally display the chip.

:component-example{component="chip-example-show"}

Inset

Use the inset prop to display the chip inside the component. This is useful when dealing with rounded components.

::component-card

props: inset: true code: >-

---

#default :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"} ::

Slots

content

Use the #content slot to fully customize the chip.

:component-example{component="chip-example-content-slot"}

Props

:component-props

Config

:component-preset