Social

Mention pill button with avatar

Compact pill button pairing a tiny avatar with a label for mention-style chips.

simple5 in Social

ButtonAvatar

Demo

---
import { Button, Avatar } from "astro-ui";
---

<div class="block-pill-buttons">
  <Button variant="outline" size="sm" shape="rounded" class="block-pill-btn">
    <Avatar name="Ada Lovelace" size="xs" />
    <span style="margin-inline-start:var(--ui-space-2)">Ada</span>
  </Button>
  <Button variant="outline" size="sm" shape="rounded" class="block-pill-btn">
    <Avatar name="Grace Hopper" size="xs" />
    <span style="margin-inline-start:var(--ui-space-2)">Grace</span>
  </Button>
  <Button variant="outline" size="sm" shape="rounded" class="block-pill-btn">
    <Avatar name="Alan Turing" size="xs" status="online" />
    <span style="margin-inline-start:var(--ui-space-2)">Alan</span>
  </Button>
</div>

<style is:global>
  .block-pill-buttons { display: flex; gap: var(--ui-space-2); flex-wrap: wrap; }
  .block-pill-btn { align-items: center; }
</style>

Zero new CSS — every element reads the library tokens. Switch to the Code tab and hit Copy for paste-ready source; form ids here are prefixed per instance so multiple copies can coexist on one page.