Badges

Flexible badge component for displaying product labels, tags, and status indicators. Supports both simple string arrays and complex badge objects with custom colors and metadata.

Live Demo

Badges - GTI

<script setup>
import Badges from 'spoko-design-system/src/components/Badges.vue';
</script>

<div class="relative min-h-19">
  <Badges :badges="['GTI', 'Motorsport', 'Lorem Ipsum']" class="top-2" />
</div>

Badge on image

Motorsport

vueastroCopy all

<div class="relative">
<img src="https://placehold.co/300x200" alt="image alt" />
<Badges :badges="['Motorsport']" class="top-2" />
</div>

Few badges on image

Motorsport

Lorem ipsum

GTI

vueastroCopy all

<div class="relative">
<img src="https://placehold.co/300x200" alt="image alt" />
<Badges :badges="['Motorsport', 'Lorem ipsum', 'GTI']" class="top-2" />
</div>

Generic Badge Classes

Semantic status badges using SDS shortcut classes — no JavaScript required.

<span class="badge-primary">Primary</span>

<span class="badge-secondary">Secondary</span>

<span class="badge-success">Success</span>

<span class="badge-error">Error</span>

<span class="badge-warning">Warning</span>

<span class="badge-info">Info</span>

<span class="badge-neutral">Neutral</span>

Props

Badge Object Structure

When using badge objects instead of simple strings:

interface BadgeObject {
  slug: string;           // Unique identifier
  label: string;          // Display text
  type?: string;          // Type indicator (optional)
  color?: string;         // CSS class for color (e.g., "bg-red-600")
  priority?: number;      // Sort priority (optional)
}

CSS Shortcuts

Status badges using semantic CSS classes — no JavaScript required: