Icon button with notification badge

<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Button } from "@/components/ui/button"
</script>

<template>
  <Button
    size="icon"
    variant="outline"
    class="relative"
    aria-label="Notifications (8)"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
      class="lucide lucide-bell"
    >
      <path d="M10.268 21a2 2 0 0 0 3.464 0" />
      <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
    </svg>
    <Badge
      variant="destructive"
      size="xs"
      class="absolute -top-1 -right-1 rounded-full px-1"
      aria-hidden="true"
    >
      8
    </Badge>
  </Button>
</template>