Badge

<script lang="ts" setup>
import { NNIconShoppingBag, NNBadge } from "@fronntui/vue";
</script>

<template>
  <div class="badge-example">
    <span style="position: relative">
      <NNIconShoppingBag />
      <NNBadge count="5" />
    </span>

    <span style="position: relative">
      <NNIconShoppingBag />
      <NNBadge count="1500" />
    </span>
  </div>
</template>

<style scoped lang="scss">
.nn-badge {
  position: absolute;
  top: calc(-1 * var(--nn-spacing-2));
  left: calc(100% - var(--nn-spacing-2));
}
</style>