Button with status dot badge

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

<template>
  <Button
    variant="outline"
    class="relative pr-8"
    aria-label="Deploy (ready)"
  >
    Live
    <span
      aria-hidden="true"
      class="absolute top-1/2 right-3 -translate-y-1/2"
    >
      <span class="relative flex size-2 rounded-full bg-emerald-500 before:absolute before:inset-0 before:animate-ping before:rounded-full before:bg-emerald-400 before:opacity-75 before:duration-1500 after:absolute after:inset-0 after:animate-ping after:rounded-full after:bg-emerald-400 after:opacity-40 after:delay-500 after:duration-1500" />
    </span>
  </Button>
</template>