GrBadgeWrap

<script setup lang="ts">
import { GrBadgeWrap, GrButton } from '@feugene/granularity'
</script>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <GrBadgeWrap :value="3">
      <GrButton size="sm" variant="outline">Inbox</GrButton>
    </GrBadgeWrap>

    <GrBadgeWrap :value="120" :max="99" tone="primary">
      <GrButton size="sm" variant="outline">Approvals</GrButton>
    </GrBadgeWrap>

    <GrBadgeWrap :value="0" show-zero tone="neutral" placement="bottom-right">
      <GrButton size="sm" variant="outline">Drafts</GrButton>
    </GrBadgeWrap>

    <GrBadgeWrap :value="7" tone="success">
      <GrButton size="sm">Notifications</GrButton>
    </GrBadgeWrap>
  </div>
</template>

<script setup lang="ts">
import { GrAvatar, GrBadgeWrap, GrCard } from '@feugene/granularity'
</script>

<template>
  <div class="flex flex-wrap items-center gap-6">
    <GrBadgeWrap dot aria-label="Unread messages">
      <GrAvatar :size="40">AD</GrAvatar>
    </GrBadgeWrap>

    <GrBadgeWrap dot tone="warning">
      <GrAvatar :size="40" shape="square">QA</GrAvatar>
    </GrBadgeWrap>

    <GrCard class="p-4 text-sm text-[var(--gr-muted-fg)]">
      Dot mode is useful when the exact count is less important than “requires attention now”.
    </GrCard>
  </div>
</template>

<script setup lang="ts">
import { GrBadgeWrap, GrButton, GrCard } from '@feugene/granularity'
import { ref } from 'vue'

const unread = ref(3)

/** Пять писем подряд — то, на чём анимация превратилась бы в мельтешение. */
function receiveBatch() {
  for (let i = 0; i < 5; i++) setTimeout(() => unread.value++, i * 40)
}
</script>

<template>
  <div class="grid gap-4">
    <div class="flex flex-wrap items-center gap-6">
      <GrBadgeWrap :value="unread" :max="99" animate>
        <GrButton size="sm" variant="outline">Inbox</GrButton>
      </GrBadgeWrap>

      <div class="flex flex-wrap items-center gap-2">
        <GrButton size="sm" variant="ghost-border" @click="unread++">One message</GrButton>
        <GrButton size="sm" variant="ghost-border" @click="receiveBatch">Batch of five</GrButton>
        <GrButton size="sm" variant="ghost" @click="unread = 0">Mark all read</GrButton>
      </div>
    </div>

    <GrCard class="p-4 text-sm text-[var(--gr-muted-fg)]">
      The badge pops when the count appears or grows, and stays silent when it drops — a falling number is the trace of
      the user's own action. A burst gives one pop, not five: while the animation plays a new value does not restart it.
    </GrCard>
  </div>
</template>

<script setup lang="ts">
import { GrBadgeWrap, GrButton } from '@feugene/granularity'
</script>

<template>
  <div class="grid gap-4">
    <div class="flex flex-wrap items-center gap-3 rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-4">
      <GrBadgeWrap :value="2">
        <GrButton size="sm" variant="ghost-border">Inbox</GrButton>
      </GrBadgeWrap>

      <GrBadgeWrap dot>
        <GrButton size="sm" variant="ghost-border">Deployments</GrButton>
      </GrBadgeWrap>

      <GrButton size="sm" variant="ghost-border">Audit log</GrButton>
    </div>

    <div class="text-sm text-[var(--gr-muted-fg)]">
      Because `GrBadgeWrap` is slot-based, it can decorate buttons, tabs, icons or avatars without changing their internals.
    </div>
  </div>
</template>