Chip

Usage

import { Chip } from '@hareui/vue'

DefaultAccentSuccessWarningDanger

<script setup lang="ts">import { Chip } from '@hareui/vue'</script><template>  <div class="flex flex-wrap items-center gap-3">    <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>

Anatomy

Plain-text default slot content is automatically wrapped in the label element.

<Chip>
  <template #leading />
  Label text
  <template #trailing />
</Chip>

ui keys: base, label.

Examples

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

<script setup lang="ts">import { Chip, Separator } from '@hareui/vue'import { Icon } from '@iconify/vue'const sizes = ['lg', 'md', 'sm'] as constconst variants = ['primary', 'secondary', 'tertiary', 'soft'] as constconst colors = ['accent', 'default', 'success', 'warning', 'danger'] as const</script><template>  <div class="flex flex-col gap-8 overflow-x-auto">    <template v-for="(size, index) in sizes" :key="size">      <div class="flex flex-col gap-4">        <h3 class="text-sm font-semibold text-muted capitalize">{{ size }}</h3>        <div class="flex items-center gap-3">          <div class="w-24 shrink-0" />          <div v-for="color in colors" :key="color" class="flex shrink-0 items-center justify-center" style="width: 130px">            <span class="text-xs text-muted capitalize">{{ color }}</span>          </div>        </div>        <div class="flex flex-col gap-3">          <div v-for="variant in variants" :key="variant" class="flex items-center gap-3">            <div class="w-24 shrink-0 text-sm text-muted capitalize">{{ variant }}</div>            <div v-for="color in colors" :key="color" class="flex shrink-0 items-center justify-center" style="width: 130px">              <Chip :color="color" :size="size" :variant="variant">                <template #leading><Icon height="16" icon="gravity-ui:circle-dashed" width="16" /></template>                Label                <template #trailing><Icon height="16" icon="gravity-ui:circle-dashed" width="16" /></template>              </Chip>            </div>          </div>        </div>      </div>      <Separator v-if="index < sizes.length - 1" />    </template>  </div></template>

Statuses

DefaultActivePendingInactive

New FeatureAvailableBetaDeprecated

<script setup lang="ts">import { Chip } from '@hareui/vue'import { Icon } from '@iconify/vue'</script><template>  <div class="flex flex-col gap-4">    <div class="flex flex-wrap items-center gap-3">      <Chip label="Default" variant="primary">        <template #leading><Icon height="16" icon="gravity-ui:circle-fill" width="6" /></template>      </Chip>      <Chip color="success" label="Active" variant="primary">        <template #leading><Icon height="16" icon="gravity-ui:circle-fill" width="6" /></template>      </Chip>      <Chip color="warning" label="Pending" variant="primary">        <template #leading><Icon height="16" icon="gravity-ui:circle-fill" width="6" /></template>      </Chip>      <Chip color="danger" label="Inactive" variant="primary">        <template #leading><Icon height="16" icon="gravity-ui:circle-fill" width="6" /></template>      </Chip>    </div>    <div class="flex flex-wrap items-center gap-3">      <Chip label="New Feature">        <template #leading><Icon height="16" icon="gravity-ui:circle-info" width="12" /></template>      </Chip>      <Chip color="success" label="Available">        <template #leading><Icon height="16" icon="gravity-ui:check" width="12" /></template>      </Chip>      <Chip color="warning" label="Beta">        <template #leading><Icon height="16" icon="gravity-ui:triangle-exclamation" width="12" /></template>      </Chip>      <Chip color="danger" label="Deprecated">        <template #leading><Icon height="16" icon="gravity-ui:ban" width="12" /></template>      </Chip>    </div>  </div></template>

With Icons

InformationCompletedPendingFailedLabel

<script setup lang="ts">import { Chip } from '@hareui/vue'import { Icon } from '@iconify/vue'</script><template>  <div class="flex flex-wrap items-center gap-3">    <Chip label="Information">      <template #leading><Icon height="16" icon="gravity-ui:circle-fill" width="6" /></template>    </Chip>    <Chip color="success" label="Completed">      <template #leading><Icon height="16" icon="gravity-ui:circle-check-fill" width="12" /></template>    </Chip>    <Chip color="warning" label="Pending">      <template #leading><Icon height="16" icon="gravity-ui:clock" width="12" /></template>    </Chip>    <Chip color="danger" label="Failed">      <template #leading><Icon height="16" icon="gravity-ui:xmark" width="12" /></template>    </Chip>    <Chip color="accent" label="Label">      <template #trailing><Icon height="16" icon="gravity-ui:chevron-down" width="12" /></template>    </Chip>  </div></template>

Customization

Tailwind CSS

Use the class prop for the root and :ui="{ label: '…' }" for the label (tailwind-merge resolves conflicts):

DraftIn reviewPublished

<script setup lang="ts">import { Chip } from '@hareui/vue'</script><template>  <div class="flex flex-wrap items-center gap-2">    <Chip class="rounded-full bg-default-soft px-3 text-default-soft-foreground">Draft</Chip>    <Chip class="rounded-full bg-warning-soft px-3 text-warning-soft-foreground">In review</Chip>    <Chip class="rounded-full bg-success-soft px-3 text-success-soft-foreground">Published</Chip>  </div></template>

Global theme override

Override the chip theme app-wide with createHareUI:

app.use(createHareUI({
  ui: {
    chip: {
      slots: {
        base: 'rounded-full text-xs',
        label: 'font-medium',
      },
      compoundVariants: [
        { color: 'accent', class: { base: 'border-accent/20 text-accent' } },
      ],
    },
  },
}))

Styling Reference

Each rendered element carries the same data-slot string as HeroUI, so selectors translate 1:1.

`ui` key	`data-slot`	Description
`base`	`chip`	Base chip container styles (`as`, default `span`)
`label`	`chip-label`	Label text slot styles, rendered when `label`/default slot is present

HeroUI's .chip--* modifier classes correspond to these props (HareUI renders utilities, not BEM classes, so style through class, ui or createHareUI):

color: accent, danger, default, success, warning
variant: primary (filled background), secondary (default), tertiary (transparent background), soft (lighter background)
size: sm, md (default), lg

Compound variants combine variant and color:

Primary: accent, success, warning and danger get a filled background.
Soft: accent, success, warning, danger and default get a lighter background.

Other combinations (e.g. variant="secondary" color="accent") can be styled with a compoundVariants entry in the global theme override.

API Reference

Props

Prop	Type	Default	Description
`as`	`AsTag \| Component`	`"span"`	The element or component to render as.
`label`	`string \| number`	-	Text rendered inside the chip label.
`color`	`"default" \| "accent" \| "success" \| "warning" \| "danger"`	`'default'`	Color of the chip.
`variant`	`"primary" \| "secondary" \| "soft" \| "tertiary"`	`'secondary'`	Visual style of the chip.
`size`	`"md" \| "sm" \| "lg"`	`'md'`	Size of the chip.
`ui`	ComponentSlots<{ slots: { base: string; label: string; }; variants: { color: { accent: { base: string; }; danger: { base: string; }; default: { base: string; }; success: { base: string; }; warning: { base: string; }; }; variant: { primary: { base: string; }; secondary: { base: string; }; soft: { base: string; }; tertiary: { base: string; }; }; size: { sm: { base: string; }; md: { base: string; }; lg: { base: string; }; }; }; compoundVariants: { variant: string; color: string; class: { base: string; }; }[]; defaultVariants: { color: string; variant: string; size: string; }; }>	-	Per-slot class overrides.

Slots

Slot	Props	Description
`leading`	`any`	Content rendered before the label (e.g. an icon or status dot).
`default`	`any`	The chip label. Wrapped in the `label` element.
`trailing`	`any`	Content rendered after the label.

Avatar

Card

lg

md

sm

On this page