Pilled small outline button with avatar

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="
</script>

<template>
  <Button variant="outline" size="sm" class="rounded-full gap-1 pl-0.5">
    <Avatar class="border-background size-6 border-2">
      <AvatarImage :src="PIXEL" alt="@shadcn" />
      <AvatarFallback>CH</AvatarFallback>
    </Avatar>
    <span class="text-xs">@shadcn</span>
  </Button>
</template>