Chip

Small informational label for statuses, categories, and compact metadata.

Import

vue

<script setup lang="ts">
import { Chip, ChipLabel } from '@heroui-vue/vue'
</script>

Anatomy

Plain text children are automatically wrapped in ChipLabel. When composing icons with labels, use ChipLabel explicitly.

vue

<template>
  <Chip>
    <ChipLabel>Label text</ChipLabel>
  </Chip>
</template>

Usage

Basic

DefaultAccentSuccessWarningDanger

<template>
  <div class="demo-chip-row">
    <Chip>Default</Chip>
    <Chip color="accent">Accent</Chip>
    <Chip color="success">Success</Chip>
    <Chip color="warning">Warning</Chip>
    <Chip color="danger">Danger</Chip>
  </div>
</template>

<script setup lang="ts">
import { Chip } from '@heroui-vue/vue'
</script>

<style lang="less">
.demo-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
</style>

Variants

lg

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

md

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

sm

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

<template>
  <div class="demo-chip-variants">
    <template
      v-for="(size, sizeIndex) in sizes"
      :key="size"
    >
      <div class="demo-chip-section">
        <h4 class="demo-chip-heading">
          {{ size }}
        </h4>
        <div class="demo-chip-variant-row">
          <div class="demo-chip-variant-label" />
          <div
            v-for="color in colors"
            :key="color"
            class="demo-chip-variant-cell"
          >
            <span class="demo-chip-variant-header">{{ color }}</span>
          </div>
        </div>
        <div class="demo-chip-variant-grid">
          <div
            v-for="variant in variants"
            :key="variant"
            class="demo-chip-variant-row"
          >
            <div class="demo-chip-variant-label">
              {{ variant }}
            </div>
            <div
              v-for="color in colors"
              :key="color"
              class="demo-chip-variant-cell"
            >
              <Chip
                :color="color"
                :size="size"
                :variant="variant"
              >
                <CircleDashedIcon />
                <ChipLabel>Label</ChipLabel>
                <CircleDashedIcon />
              </Chip>
            </div>
          </div>
        </div>
      </div>
      <Separator v-if="sizeIndex < sizes.length - 1" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, h } from 'vue'
import { Chip, ChipLabel, Separator } from '@heroui-vue/vue'

const sizes = ['lg', 'md', 'sm'] as const
const variants = ['primary', 'secondary', 'tertiary', 'soft'] as const
const colors = ['accent', 'default', 'success', 'warning', 'danger'] as const

const CircleDashedIcon = defineComponent({
  setup() {
    return () =>
      h(
        'svg',
        {
          viewBox: '0 0 24 24',
          fill: 'none',
          stroke: 'currentColor',
          'stroke-width': '2.5',
          'stroke-linecap': 'round',
          'stroke-linejoin': 'round',
          'aria-hidden': 'true',
        },
        [
          h('path', { d: 'M10.1 2.2a10 10 0 0 1 3.8 0' }),
          h('path', { d: 'M17.6 4.2a10 10 0 0 1 2.2 2.2' }),
          h('path', { d: 'M21.8 10.1a10 10 0 0 1 0 3.8' }),
          h('path', { d: 'M19.8 17.6a10 10 0 0 1-2.2 2.2' }),
          h('path', { d: 'M13.9 21.8a10 10 0 0 1-3.8 0' }),
          h('path', { d: 'M6.4 19.8a10 10 0 0 1-2.2-2.2' }),
          h('path', { d: 'M2.2 13.9a10 10 0 0 1 0-3.8' }),
          h('path', { d: 'M4.2 6.4a10 10 0 0 1 2.2-2.2' }),
        ],
      )
  },
})
</script>

<style lang="less">
.demo-chip-variants {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  gap: 2rem;
  overflow-x: auto;
  text-align: left;
}

.demo-chip-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.demo-chip-heading {
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: capitalize;
}

.demo-chip-variant-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.demo-chip-variant-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.demo-chip-variant-label {
  width: 6rem;
  flex-shrink: 0;
  color: var(--color-muted-foreground);
  font-size: 0.875rem;
  text-transform: capitalize;
}

.demo-chip-variant-cell {
  display: flex;
  width: 8.125rem;
  flex-shrink: 0;
  justify-content: center;
}

.demo-chip-variant-header {
  color: var(--color-muted-foreground);
  font-size: 0.75rem;
  text-transform: capitalize;
}

.chip svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}
</style>

With Icons

InformationCompletedPendingFailedLabel

<template>
  <div class="demo-chip-row">
    <Chip>
      <DemoIcon name="dot" class="demo-chip-dot" />
      <ChipLabel>Information</ChipLabel>
    </Chip>
    <Chip color="success">
      <DemoIcon name="check" />
      <ChipLabel>Completed</ChipLabel>
    </Chip>
    <Chip color="warning">
      <DemoIcon name="clock" />
      <ChipLabel>Pending</ChipLabel>
    </Chip>
    <Chip color="danger">
      <DemoIcon name="x" />
      <ChipLabel>Failed</ChipLabel>
    </Chip>
    <Chip color="accent">
      <ChipLabel>Label</ChipLabel>
      <DemoIcon name="chevron-down" />
    </Chip>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, h } from 'vue'
import { Chip, ChipLabel } from '@heroui-vue/vue'

const iconPaths: Record<string, string[]> = {
  dot: ['M12 12h.01'],
  check: ['M20 6 9 17l-5-5'],
  clock: ['M12 7v5l3 2', 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z'],
  x: ['M18 6 6 18', 'M6 6l12 12'],
  'chevron-down': ['M6 9l6 6 6-6'],
}

const DemoIcon = defineComponent({
  props: {
    name: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    return () => {
      if (props.name === 'dot') {
        return h(
          'svg',
          {
            viewBox: '0 0 24 24',
            fill: 'currentColor',
            'aria-hidden': 'true',
          },
          [h('circle', { cx: '12', cy: '12', r: '4' })],
        )
      }

      return h(
        'svg',
        {
          viewBox: '0 0 24 24',
          fill: 'none',
          stroke: 'currentColor',
          'stroke-width': '2.5',
          'stroke-linecap': 'round',
          'stroke-linejoin': 'round',
          'aria-hidden': 'true',
        },
        iconPaths[props.name]?.map((d) => h('path', { d })) ?? [],
      )
    }
  },
})
</script>

<style lang="less">
.demo-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.chip svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.chip .demo-chip-dot {
  width: 0.375rem;
  height: 0.375rem;
}
</style>

Statuses

DefaultActivePendingInactive

New FeatureAvailableBetaDeprecated

<template>
  <div class="demo-chip-stack">
    <div class="demo-chip-row">
      <Chip variant="primary">
        <DemoIcon name="dot" class="demo-chip-dot" />
        <ChipLabel>Default</ChipLabel>
      </Chip>
      <Chip color="success" variant="primary">
        <DemoIcon name="dot" class="demo-chip-dot" />
        <ChipLabel>Active</ChipLabel>
      </Chip>
      <Chip color="warning" variant="primary">
        <DemoIcon name="dot" class="demo-chip-dot" />
        <ChipLabel>Pending</ChipLabel>
      </Chip>
      <Chip color="danger" variant="primary">
        <DemoIcon name="dot" class="demo-chip-dot" />
        <ChipLabel>Inactive</ChipLabel>
      </Chip>
    </div>

    <div class="demo-chip-row">
      <Chip>
        <DemoIcon name="info" />
        <ChipLabel>New Feature</ChipLabel>
      </Chip>
      <Chip color="success">
        <DemoIcon name="check" />
        <ChipLabel>Available</ChipLabel>
      </Chip>
      <Chip color="warning">
        <DemoIcon name="warning" />
        <ChipLabel>Beta</ChipLabel>
      </Chip>
      <Chip color="danger">
        <DemoIcon name="ban" />
        <ChipLabel>Deprecated</ChipLabel>
      </Chip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, h } from 'vue'
import { Chip, ChipLabel } from '@heroui-vue/vue'

const iconPaths: Record<string, string[]> = {
  dot: ['M12 12h.01'],
  info: ['M12 16v-4', 'M12 8h.01', 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z'],
  check: ['M20 6 9 17l-5-5'],
  warning: ['M12 9v4', 'M12 17h.01', 'M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'],
  ban: ['M4.9 4.9 19.1 19.1', 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z'],
}

const DemoIcon = defineComponent({
  props: {
    name: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    return () => {
      if (props.name === 'dot') {
        return h(
          'svg',
          {
            viewBox: '0 0 24 24',
            fill: 'currentColor',
            'aria-hidden': 'true',
          },
          [h('circle', { cx: '12', cy: '12', r: '4' })],
        )
      }

      return h(
        'svg',
        {
          viewBox: '0 0 24 24',
          fill: 'none',
          stroke: 'currentColor',
          'stroke-width': '2.5',
          'stroke-linecap': 'round',
          'stroke-linejoin': 'round',
          'aria-hidden': 'true',
        },
        iconPaths[props.name]?.map((d) => h('path', { d })) ?? [],
      )
    }
  },
})
</script>

<style lang="less">
.demo-chip-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.demo-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.chip svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.chip .demo-chip-dot {
  width: 0.375rem;
  height: 0.375rem;
}
</style>

Styling

Passing Classes

vue

<template>
  <Chip class="rounded-full px-4 py-2 font-bold">
    <ChipLabel class="text-lg uppercase">Custom Styled</ChipLabel>
  </Chip>
</template>

CSS Classes

Class	Description
`.chip`	Base chip container
`.chip__label`	Label text slot
`.chip--accent`	Accent color
`.chip--danger`	Danger color
`.chip--default`	Default color
`.chip--success`	Success color
`.chip--warning`	Warning color
`.chip--primary`	Filled background variant
`.chip--secondary`	Secondary variant
`.chip--tertiary`	Transparent variant
`.chip--soft`	Soft background variant
`.chip--sm`	Small size
`.chip--md`	Medium size
`.chip--lg`	Large size

API

Chip Props

Prop	Type	Default	Description
`color`	`'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'`	`'default'`	Color variant
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'soft'`	`'secondary'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Chip size
`class`	`string`	`undefined`	Additional classes for the chip root

ChipLabel Props

Prop	Type	Default	Description
`class`	`string`	`undefined`	Additional classes for the label

Slots

Component	Slot	Description
`Chip`	`default`	Text, icons, or custom content
`ChipLabel`	`default`	Label text content

Chip ​

Import ​

Anatomy ​

Usage ​

Basic ​

Variants ​

lg

md

sm

With Icons ​

Statuses ​

Styling ​

Passing Classes ​

CSS Classes ​

API ​

Chip Props ​

ChipLabel Props ​

Slots ​

Chip

Import

Anatomy

Usage

Basic

Variants

With Icons

Statuses

Styling

Passing Classes

CSS Classes

API

Chip Props

ChipLabel Props

Slots