Badge

A Vue UI kit component for Baklava's bl-badge component for displaying status badges.

Basic Badge

Use the Badge component with the default slot for simple badge content.

New

<template>
  <BvBadge>New</BvBadge>
</template>

<script setup>
import { BvBadge } from "@baklavue/ui";
</script>

Sizes

The Badge component supports three sizes: small, medium, and large.

SmallMediumLarge

<template>
  <BvBadge size="small">Small</BvBadge>
  <BvBadge size="medium">Medium</BvBadge>
  <BvBadge size="large">Large</BvBadge>
</template>

<script setup>
import { BvBadge } from "@baklavue/ui";
</script>

With Icon

Add an icon to the badge using the icon prop.

UpdatesSettings

<template>
  <BvBadge icon="notification">Updates</BvBadge>
  <BvBadge icon="settings" size="small">Settings</BvBadge>
</template>

<script setup>
import { BvBadge } from "@baklavue/ui";
</script>

Props

Prop	Type	Default	Description
size	BadgeSize	'medium'	Badge size (small, medium, large)
icon	BaklavaIcon | undefined	undefined	Optional icon name for the badge

Types

import type { BadgeProps } from "@baklavue/ui";

// BadgeSize: "small" | "medium" | "large"

interface BadgeProps {
  size?: BadgeSize;
  icon?: BaklavaIcon;
}

Usage Notes

• Default Slot: The badge content is provided via the default slot. Place text or simple content between the opening and closing tags.

• Styling: The component uses Baklava's default styling. Custom colors can be applied through CSS variables (--bl-badge-bg-color, --bl-badge-color) or by overriding the component styles.

• Accessibility: The component follows Baklava's accessibility guidelines and includes proper ARIA attributes for screen readers.