Badge

The Badge component displays a small indicator, typically used to show notifications, counts, or status indicators. It can be positioned as an overlay on other elements or displayed inline. Supports numeric values, custom content, and various design colors.

Basic badge

The Badge component displays a dot indicator. By default, it shows as a small circular badge positioned at the bottom-right of its content.

Source code

<template>
  <IkBadge>
    <IkButton>Notifications</IkButton>
  </IkBadge>
</template>
<script setup>
import { IkBadge } from '@ikol/ui-kit/components/IkBadge';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
</script>

Badge with number

Use the number prop to display a numeric value. Numbers less than 10 are shown as-is, while 10 or greater display as "9+".

Source code

<template>
  <div>
    <IkBadge :number="3" class="ik-mr-4">
      <IkButton>Messages</IkButton>
    </IkBadge>
    <IkBadge :number="15" class="ik-mr-4">
      <IkButton>Notifications</IkButton>
    </IkBadge>
    <IkBadge :number="0">
      <IkButton>Empty</IkButton>
    </IkBadge>
  </div>
</template>
<script setup>
import { IkBadge } from '@ikol/ui-kit/components/IkBadge';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
</script>

Show zero

By default, badges with a value of 0 are hidden. Use the show_zero prop to display them.

Source code

<template>
  <div>
    <IkBadge :number="0" show_zero class="ik-mr-4">
      <IkButton>With Zero</IkButton>
    </IkBadge>
    <IkBadge :number="0">
      <IkButton>Without Zero</IkButton>
    </IkBadge>
  </div>
</template>
<script setup>
import { IkBadge } from '@ikol/ui-kit/components/IkBadge';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
</script>

Design colors

The Badge supports multiple design colors to convey different meanings: primary, success, error, accent, and default.

Source code

<template>
  <div>
    <IkBadge design="primary" :number="5" class="ik-mr-4">
      <IkButton>Primary</IkButton>
    </IkBadge>
    <IkBadge design="success" :number="3" class="ik-mr-4">
      <IkButton>Success</IkButton>
    </IkBadge>
    <IkBadge design="error" :number="12" class="ik-mr-4">
      <IkButton>Error</IkButton>
    </IkBadge>
    <IkBadge design="accent" :number="7" class="ik-mr-4">
      <IkButton>Accent</IkButton>
    </IkBadge>
    <IkBadge design="default" :number="2">
      <IkButton>Default</IkButton>
    </IkBadge>
  </div>
</template>
<script setup>
import { IkBadge } from '@ikol/ui-kit/components/IkBadge';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
</script>

Positioning

Control the badge position using the top and left props. By default, badges appear at the bottom-right.

Source code

<template>
  <div>
    <IkBadge :number="3" class="ik-mr-4">
      <IkButton>Bottom Right</IkButton>
    </IkBadge>
    <IkBadge :number="3" top class="ik-mr-4">
      <IkButton>Top Right</IkButton>
    </IkBadge>
    <IkBadge :number="3" left class="ik-mr-4">
      <IkButton>Bottom Left</IkButton>
    </IkBadge>
    <IkBadge :number="3" top left>
      <IkButton>Top Left</IkButton>
    </IkBadge>
  </div>
</template>
<script setup>
import { IkBadge } from '@ikol/ui-kit/components/IkBadge';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
</script>

Custom size

Adjust the badge size using the size prop. The default size is 12px.

Source code

<template>
  <div>
    <IkBadge :size="8" :number="3" class="ik-mr-4">
      <IkButton>Small (8px)</IkButton>
    </IkBadge>
    <IkBadge :size="12" :number="3" class="ik-mr-4">
      <IkButton>Default (12px)</IkButton>
    </IkBadge>
    <IkBadge :size="16" :number="3" class="ik-mr-4">
      <IkButton>Medium (16px)</IkButton>
    </IkBadge>
    <IkBadge :size="20" :number="3">
      <IkButton>Large (20px)</IkButton>
    </IkBadge>
  </div>
</template>
<script setup>
import { IkBadge } from '@ikol/ui-kit/components/IkBadge';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
</script>

Outer mode

Use the outer prop to display the badge inline next to the content instead of overlaying it. This is useful for displaying badges in lists or inline text.

Inbox

Unread Messages

Pending Tasks

Source code

<template>
  <div>
    <IkBadge outer :number="5" class="ik-mb-4">
      <span>Inbox</span>
    </IkBadge>
    <IkBadge outer design="success" :number="12" class="ik-mb-4">
      <span>Unread Messages</span>
    </IkBadge>
    <IkBadge outer design="error" :number="3">
      <span>Pending Tasks</span>
    </IkBadge>
  </div>
</template>
<script setup>
import { IkBadge } from '@ikol/ui-kit/components/IkBadge';
</script>

Custom content

Use the content slot to provide custom content inside the badge dot instead of a number.

Source code

<template>
  <div>
    <IkBadge class="ik-mr-4">
      <template #content>
        <IkIcon icon="star" style="font-size: 8px;" />
      </template>
      <IkButton>Favorite</IkButton>
    </IkBadge>
    <IkBadge design="success">
      <template #content>
        <IkIcon icon="check" style="font-size: 8px;" />
      </template>
      <IkButton>Verified</IkButton>
    </IkBadge>
  </div>
</template>
<script setup>
import { IkBadge } from '@ikol/ui-kit/components/IkBadge';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { IkIcon } from '@ikol/ui-kit/components/IkIcon';
</script>

Show/hide

Control badge visibility using the show prop. This is useful for conditionally displaying badges.

Source code

<template>
  <div>
    <IkBadge :number="5" :show="isVisible" class="ik-mr-4">
      <IkButton>Toggle Badge</IkButton>
    </IkBadge>
    <IkButton @click="isVisible = !isVisible">
      {{ isVisible ? 'Hide' : 'Show' }} Badge
    </IkButton>
  </div>
</template>
<script setup>
import { IkBadge } from '@ikol/ui-kit/components/IkBadge';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { ref } from 'vue';

const isVisible = ref(true);
</script>