Badge

Usage

import { Badge } from '@hareui/vue'

JD5ABNewCD

<script setup lang="ts">import { Avatar, Badge } from '@hareui/vue'</script><template>  <div class="flex items-center gap-6">    <Badge color="danger" content="5" size="sm">      <Avatar fallback="JD" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg" />    </Badge>    <Badge color="accent" content="New" size="sm">      <Avatar fallback="AB" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg" />    </Badge>    <Badge color="success" placement="bottom-right" size="sm">      <Avatar fallback="CD" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg" />    </Badge>  </div></template>

Anatomy

<template>
  <!-- the default slot is the anchored element (HeroUI's Badge.Anchor children) -->
  <Badge content="5">
    <Avatar fallback="JD" />
  </Badge>
</template>

`ui` key	Element	Description
`anchor`	`[data-slot="badge-anchor"]`	Wraps the default slot; only rendered when it is filled
`base`	`[data-slot="badge"]`	The badge (receives `class`)
`label`	`[data-slot="badge-label"]`	Wraps `content` (HeroUI's `Badge.Label`)

Examples

Variants

primary

JD5JD5JD5JD5JD5

secondary

JD5JD5JD5JD5JD5

soft

JD5JD5JD5JD5JD5

<script setup lang="ts">import { Avatar, Badge, Separator } from '@hareui/vue'const variants = ['primary', 'secondary', 'soft'] as constconst colors = ['accent', 'default', 'success', 'warning', 'danger'] as constconst avatarSrc = 'https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg'</script><template>  <div class="flex flex-col gap-8">    <template v-for="(variant, index) in variants" :key="variant">      <div class="flex flex-col gap-4">        <h3 class="text-sm font-semibold text-muted capitalize">          {{ variant }}        </h3>        <div class="flex items-center gap-6">          <Badge v-for="color in colors" :key="color" :color="color" content="5" size="sm" :variant="variant">            <Avatar fallback="JD" :src="avatarSrc" />          </Badge>        </div>      </div>      <Separator v-if="index < variants.length - 1" />    </template>  </div></template>

Sizes

JD5JD5JD5

<script setup lang="ts">import { Avatar, Badge } from '@hareui/vue'const sizes = ['sm', 'md', 'lg'] as constconst avatarSrc = 'https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg'</script><template>  <div class="flex items-center gap-6">    <Badge v-for="size in sizes" :key="size" color="danger" content="5" :size="size">      <Avatar fallback="JD" :size="size" :src="avatarSrc" />    </Badge>  </div></template>

Colors

JDJDJDJDJD

<script setup lang="ts">import { Avatar, Badge } from '@hareui/vue'const colors = ['default', 'accent', 'success', 'warning', 'danger'] as const</script><template>  <div class="flex items-center gap-6">    <Badge v-for="color in colors" :key="color" :color="color" size="sm">      <Avatar fallback="JD" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg" />    </Badge>  </div></template>

Placements

JDtop-right

JDtop-left

JDbottom-right

JDbottom-left

<script setup lang="ts">import { Avatar, Badge } from '@hareui/vue'const placements = ['top-right', 'top-left', 'bottom-right', 'bottom-left'] as constconst avatarSrc = 'https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg'</script><template>  <div class="flex items-center gap-8">    <div v-for="placement in placements" :key="placement" class="flex flex-col items-center gap-2">      <Badge color="accent" :placement="placement" size="sm">        <Avatar fallback="JD" :src="avatarSrc" />      </Badge>      <span class="text-xs text-muted">{{ placement }}</span>    </div>  </div></template>

Dot Badge

Empty badges act as status indicators — useful for online/offline states or activity signals.

JDJDJDJD

<script setup lang="ts">import { Avatar, Badge } from '@hareui/vue'const colors = ['accent', 'success', 'warning', 'danger'] as const</script><template>  <div class="flex items-center gap-6">    <Badge v-for="color in colors" :key="color" :color="color" placement="bottom-right" size="sm">      <Avatar fallback="JD" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg" />    </Badge>  </div></template>

With Content

Badge supports text, numbers, and icons as content. When no content is provided, it renders as a dot indicator.

JD5JDNewJD99+JD

<script setup lang="ts">import { Icon } from '@iconify/vue'import { Avatar, Badge } from '@hareui/vue'</script><template>  <div class="flex items-center gap-6">    <Badge color="danger" content="5" size="sm">      <Avatar fallback="JD" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg" />    </Badge>    <Badge color="danger" content="New" size="sm">      <Avatar fallback="JD" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg" />    </Badge>    <Badge color="danger" content="99+" size="sm">      <Avatar fallback="JD" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg" />    </Badge>    <Badge color="accent" size="sm">      <Avatar fallback="JD" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg" />      <template #content>        <Icon class="size-2.5" icon="gravity-ui:bell" />      </template>    </Badge>  </div></template>

Customization

Tailwind CSS

KW5

<script setup lang="ts">import { Avatar, Badge } from '@hareui/vue'</script><template>  <Badge class="min-w-5 font-semibold tabular-nums" color="accent" content="5" size="sm" variant="soft">    <Avatar alt="Kate Wilson" fallback="KW" src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg" />  </Badge></template>

Global theme override

app.use(createHareUI({
  ui: {
    badge: {
      slots: { base: 'border-2' },
      defaultVariants: { size: 'sm' },
    },
  },
}))

Styling Reference

Slots

anchor → [data-slot="badge-anchor"] – Positioning wrapper (relative inline-flex)
base → [data-slot="badge"] – Badge styles; colors come from --badge-bg, --badge-fg and --badge-border
label → [data-slot="badge-label"] – Text content padding

Variants

color: default, accent, success, warning, danger
variant: primary (solid background), secondary (default background, colored text), soft (muted background)
size: sm, md, lg
placement: top-right, top-left, bottom-right, bottom-left

API Reference

Props

Prop	Type	Default	Description
`content`	`string \| number`	-	Text or number shown in the badge, wrapped in the `label` element. Omit it (and `#content`) for a dot.
`color`	`"default" \| "accent" \| "success" \| "warning" \| "danger"`	-	Badge color.
`placement`	`"top-right" \| "top-left" \| "bottom-right" \| "bottom-left"`	-	Corner of the anchored element the badge sits on.
`size`	`"md" \| "sm" \| "lg"`	-	Badge size.
`variant`	`"primary" \| "secondary" \| "soft"`	-	Badge variant.
`ui`	ComponentSlots<{ slots: { anchor: string; base: string; label: string; }; variants: { color: { accent: { base: string; }; default: { base: string; }; success: { base: string; }; warning: { base: string; }; danger: { base: string; }; }; placement: { 'top-right': { base: string; }; 'top-left': { base: string; }; 'bottom-right': { base: string; }; 'bottom-left': { base: string; }; }; size: { lg: { base: string; }; md: { base: string; }; sm: { base: string; }; }; variant: { primary: { base: string; }; secondary: { base: string; }; soft: { base: string; }; }; }; compoundVariants: { variant: string; color: string; class: { base: string; }; }[]; defaultVariants: { color: string; placement: string; size: string; variant: string; }; }>	-	Per-slot class overrides.

Slots

Slot	Props	Description
`default`	`any`	The element the badge is anchored to (HeroUI's `Badge.Anchor` children). Without it the badge renders on its own.
`content`	`any`	Custom badge content such as an icon, rendered without the `label` wrapper.

Avatar

Chip

primary

secondary

soft

On this page