Badge

Status indicator with label and optional icon for highlighting states or counts.

Open in Storybook

Interactive Demo

ActivePendingFailedInfo

Sizes

Size variants

LargeSmall

Usage

<script setup>
import { Badge } from '@yellowcard/b2b-design-system';
</script>

<template>
  <Badge label="Active" variant="success" />
  <Badge label="Pending" variant="warning" />
  <Badge label="3" size="small" />
</template>

API Reference

Props

Prop	Type	Default	Description
label*	string	—	Badge text content
variant	string	—	Visual style variant (success, warning, error, info, etc.)
size	string	—	Badge size
showIcon	boolean	false	Show icon alongside label
ariaLabel	string	—	Accessible label