Stratton.Cologne

Appearance

Badge ​

Kleine Badges/Labels mit optionaler Klickbarkeit.

vue
<script setup lang="ts">
import { Badge } from '@stratton-cologne/ui'
</script>

<template>
  <Badge>Neu</Badge>
  <Badge clickable @activate="() => console.log('clicked')">Klick mich</Badge>
</template>

Props ​

  • value: Inhalt/Zahl (bei dot ignoriert). max kürzt numerische Werte zu max+.
  • max: Zahl für Kürzung.
  • dot: Punkt-Badge ohne Inhalt (Default: false).
  • clickable: Interaktiv, inkl. Keyboard-Fokus/role=button (Default: false).
  • variant / tone / size / shape: Präsentations-Metadaten (reine Daten für Styling).
  • icon / iconProps: Optionales Icon-Component oder Slot icon.
  • ariaLabel / ariaLive: A11y; ariaLive Default: off.
  • id / instance: Stabile Root-ID und data-instance.

Events ​

  • click
  • activate – ausgelöst bei Enter/Space oder Klick, wenn clickable

Slots ​

  • icon: Icon-Inhalt
  • default: Badge-Text (wenn nicht dot)

Styling (data-Attribute) ​

  • Root: [data-component="sc-badge"]
  • Attribute: data-variant, data-tone, data-size, data-shape, data-dot, data-clickable, data-empty
  • Rollen: [data-role="icon"], [data-role="content"]