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
GTI
Motorsport
Lorem Ipsum
<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
<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
<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
| Prop | Type | Default | Description |
|---|---|---|---|
badges | (string | BadgeObject)[] | [] | Array of badge labels (strings) or badge objects with slug, label, type, color, and priority properties. |
Badge Object Structure
When using badge objects instead of simple strings:
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#F97583">interface</span><span style="color:#B392F0"> BadgeObject</span><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#FFAB70"> slug</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Unique identifier</span></span> <span class="line"><span style="color:#FFAB70"> label</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Display text</span></span> <span class="line"><span style="color:#FFAB70"> type</span><span style="color:#F97583">?:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Type indicator (optional)</span></span> <span class="line"><span style="color:#FFAB70"> color</span><span style="color:#F97583">?:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// CSS class for color (e.g., "bg-red-600")</span></span> <span class="line"><span style="color:#FFAB70"> priority</span><span style="color:#F97583">?:</span><span style="color:#79B8FF"> number</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Sort priority (optional)</span></span> <span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>CSS Shortcuts
Status badges using semantic CSS classes — no JavaScript required:
| Class | Purpose |
|---|---|
badge-primary |
Primary/default badge style |
badge-secondary |
Secondary badge style |
badge-success |
Success/positive indicator |
badge-error |
Error/danger indicator |
badge-warning |
Warning/attention indicator |
badge-info |
Information badge |
badge-neutral |
Neutral/default badge |