Badge component

The Badge component designed with Vue 3 and Tailwind CSS. It includes customizable color options and a size variant.

Basic Usage

Import and use Badge in your Vue components as follows:

<template>
  <Badge label="Some info" />
</template>

<script setup>
import { Badge } from '@robuust-digital/vue-components/core';
</script>

Some info

Props

Below are the props supported by Badge, which allow you to customize its appearance and behavior:

Prop	Type	Default	Description
as	String	span	Defines the element type or component to render.
label	String	''	Sets the text label for the badge.
size	String	base	Specifies the badge size. Options: base, sm.
color	String	default	Sets the badge's color variant. Learn more about color variants in the next section.

Slots

Below is example to edit the label slot of Badge:

Badge with custom slot

10 Badge with custom slot

Show code

<Badge color="red">
  <span class="text-red-800 bg-red-300 -my-1 -ml-2 size-6 inline-flex items-center justify-center text-sm rounded-full">10</span>
  Badge with custom slot
</Badge>

Color Variants

The color prop supports both predefined and custom values. Default colors include:

• default
• gray
• red
• yellow
• green
• blue
• violet
• purple
• pink

Examples

Basic Badge

Default Badge

Show code

<Badge label="Default Badge" />

Small Badge

Small Badge

Show code

<Badge color="blue" label="Small Badge" size="sm" />

CSS Customization ⚡️

To customize the badge styles global

:root {
  /* Base Badge variables */
  --rvc-badge-height: calc(var(--spacing) * 8);
  --rvc-badge-padding-x: calc(var(--spacing) * 3);
  --rvc-badge-padding-y: calc(var(--spacing) * 1.5);
  --rvc-badge-font-weight: var(--font-weight-medium);
  --rvc-badge-border-radius: calc(infinity * 1px);
  --rvc-badge-border-width: 0;
  --rvc-badge-border-style: solid;
  --rvc-badge-font-size: var(--text-base);
  --rvc-badge-gap: calc(var(--spacing) * 1);

  /* Default color variables */
  --rvc-badge-bg-color: #fcffc4;
  --rvc-badge-color: #576d07;
  --rvc-badge-border-color: var(--rvc-badge-bg-color);

  /* Gray variant */
  --rvc-badge-bg-color-gray: var(--color-slate-100);
  --rvc-badge-color-gray: var(--color-slate-700);
  --rvc-badge-border-color-gray: var(--rvc-badge-bg-color-gray);

  /* Red variant */
  --rvc-badge-bg-color-red: var(--color-red-100);
  --rvc-badge-color-red: var(--color-red-700);
  --rvc-badge-border-color-red: var(--rvc-badge-bg-color-red);

  /* Yellow variant */
  --rvc-badge-bg-color-yellow: var(--color-yellow-100);
  --rvc-badge-color-yellow: var(--color-yellow-700);
  --rvc-badge-border-color-yellow: var(--rvc-badge-bg-color-yellow);

  /* Green variant */
  --rvc-badge-bg-color-green: var(--color-green-100);
  --rvc-badge-color-green: var(--color-green-700);
  --rvc-badge-border-color-green: var(--rvc-badge-bg-color-green);

  /* Blue variant */
  --rvc-badge-bg-color-blue: var(--color-blue-100);
  --rvc-badge-color-blue: var(--color-blue-700);
  --rvc-badge-border-color-blue: var(--rvc-badge-bg-color-blue);

  /* Violet variant */
  --rvc-badge-bg-color-violet: var(--color-violet-100);
  --rvc-badge-color-violet: var(--color-violet-700);
  --rvc-badge-border-color-violet: var(--rvc-badge-bg-color-violet);

  /* Purple variant */
  --rvc-badge-bg-color-purple: var(--color-purple-100);
  --rvc-badge-color-purple: var(--color-purple-700);
  --rvc-badge-border-color-purple: var(--rvc-badge-bg-color-purple);

  /* Pink variant */
  --rvc-badge-bg-color-pink: var(--color-pink-100);
  --rvc-badge-color-pink: var(--color-pink-700);
  --rvc-badge-border-color-pink: var(--rvc-badge-bg-color-pink);

  /* Small variant */
  --rvc-badge-height-sm: calc(var(--spacing) * 6);
  --rvc-badge-padding-x-sm: calc(var(--spacing) * 2);
  --rvc-badge-padding-y-sm: calc(var(--spacing) * 1);
  --rvc-badge-font-size-sm: var(--text-sm);
}

/* Or customize the class with CSS props (not recommended) */
.rvc-badge {
  @apply cursor-pointer;
}

When you enable a border with --rvc-badge-border-width, the default badge border follows --rvc-badge-bg-color and each color variant follows its own --rvc-badge-bg-color-* token. Use --rvc-badge-border-color for the default badge and a variant token such as --rvc-badge-border-color-blue to target a single color variant.

:root {
  --rvc-badge-border-width: 1px;
  --rvc-badge-bg-color-blue: var(--color-secondary-200);
  --rvc-badge-border-color-blue: var(--color-secondary-300);
}