The agnostic-astro package utilizes XElement which exposes native web events and a handy store. Here's how you can use an agnostic-astro button to tap into this XElement superpower (and yes these are build-time server-side components—no need to partial hydrate—save that for your more exotic client widgets. Islands architecture baby…ohhh yeah! 🏝️ 🚀

<AgButton @click={(event, store) => store.foo = 'bar'}>Go</AgButton>
<AgButton size="small" mode="primary" isBordered isRounded>Small Button</AgButton>
<AgButton size="large" mode="primary" isBordered isRounded>Jumbo Mumbo</AgButton>
<AgButton isCircle>99</AgButton>
<AgButton mode="primary" isCircle>99</AgButton>
<AgButton mode="primary" isCircle isBordered>99</AgButton>
<AgButton mode="secondary" isCircle>99</AgButton>
<div class="btn-group">
  <AgButton isGrouped>One</AgButton>
  <AgButton isGrouped>Two</AgButton>
  <AgButton isGrouped>Three</AgButton>
</div>

Please don't sue me Wix 🤓 — just thought I'd show how easy it is to customize these to your needs: