Horizontal button group with primary and secondary labels

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group"
</script>

<template>
  <ButtonGroup>
    <Button size="sm" class="border-primary">
      <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-share-2 ..."
      >
        <circle cx="18" cy="5" r="3" />
        <circle cx="6" cy="12" r="3" />
        <circle cx="18" cy="19" r="3" />
        <line x1="8.59" x2="15.42" y1="13.51" y2="17.49" />
        <line x1="15.41" x2="8.59" y1="6.51" y2="10.49" />
      </svg>
      Share
    </Button>
    <ButtonGroupText class="text-muted-foreground bg-transparent px-2">
      128 Shares
    </ButtonGroupText>
  </ButtonGroup>
</template>