WtBadge

Specs

WARNING

Please, use this component with slot. Usage without slot is deprecated.

Example Badge

Code

<script setup></script>

<template>
  <wt-badge color-variable="error-color">
    <div style="width: 40px; aspect-ratio: 1; background: lightblue" />
  </wt-badge>
</template>

Example Outside Badge

Code

<script setup></script>

<template>
  <div
    style="
      width: 40px;
      aspect-ratio: 1;
      background: lightblue;
      position: relative;
    "
  >
    <wt-badge
      color-variable="error-color"
      outside
    />
  </div>
</template>

<style scoped lang="scss"></style>

Example Icon Badge

Code

<script setup></script>

<template>
  <div
    style="
      width: 40px;
      aspect-ratio: 1;
      background: lightblue;
      position: relative;
    "
  >
    <wt-badge icon-badge="dnd" />
  </div>
</template>

<style scoped lang="scss"></style>