Badge

A small label, generally appearing inside or in close proximity to another larger interface component, representing a status, property, or some other metadata.

Example Usage

Example

1 23

The component inherits the
size of it's parent 120

Headline 1 A B C

<template>
  <SkBadge value="1" :numeric="true" />
  <SkBadge value="23" :correct="undefined" :numeric="true" />

  <div class="text-l mt-l">
    The component inherits the <br />size of it's parent
    <SkBadge value="120" :numeric="true" />
  </div>

  <h1>
    Headline 1
    <SkBadge value="A" :correct="true" />
    <SkBadge value="B" :correct="false" />
    <SkBadge value="C" />
  </h1>
</template>

Properties

Name	Type	Required	Default	Description
value	String	true		What to show on the badge
correct	Boolean	false	undefined	Only use if the answer has a right or wrong or neutral (undefined)
numeric	Boolean	false	false	In case it's a number indicator / gray styling