Badge

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-badge> is the SAME shared custom element React and Vue consume — here in its
     native form. Theming comes only from the --aha-* tokens in tokens.css. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/icons.js';    // registers <aha-icon>
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-badge.js'; // registers <aha-badge>
</script>

<div style="display:flex; gap:24px; align-items:center">
  <!-- count over a wrapped child, capped as N+ -->
  <aha-badge count="128" overflow-count="99">
    <aha-icon name="system-bell" size="24"></aha-icon>
  </aha-badge>
  <!-- a bare status dot -->
  <aha-badge dot status="success"></aha-badge>
  <!-- a standalone status: a semantic dot + a label -->
  <aha-badge status="processing" text="Generating"></aha-badge>
</div>

<div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:24px">
  <!-- TONE — a filled/tinted label chip (danger·success·positive·essential·pro·branding·primary-alt) -->
  <aha-badge tone="essential">Essential</aha-badge>
  <aha-badge tone="pro">Pro</aha-badge>
  <aha-badge tone="branding">New</aha-badge>

  <!-- PLAN preset chips — pro/enterprise lead with a crown; `cycle` appends the billing cycle -->
  <aha-badge plan="free"></aha-badge>
  <aha-badge plan="pro" cycle="yearly"></aha-badge>

  <!-- RANK (leaderboard) + SESSION -->
  <aha-badge rank="1"></aha-badge>
  <aha-badge session="3"></aha-badge>

  <!-- CLICKABLE = a LINK (<a href>), never a <button>. Navigates to upgrade; animates on hover. -->
  <aha-badge plan="pro" href="/billing/upgrade"></aha-badge>
</div>

<!-- ribbon — a corner banner wrapping a card (placement end = top-right, default) -->
<aha-badge ribbon text="New" style="display:inline-block; margin-top:24px">
  <div style="width:200px; padding:20px; border:1px solid var(--aha-border,#E3E3E3); border-radius:var(--aha-radius-default,8px); background:var(--aha-bg-container,#fff)">
    Quiz template
  </div>
</aha-badge>

import '@ahaslides-product/design/aha-badge';   // registers <aha-badge>
import '@ahaslides-product/design/icons';       // registers <aha-icon>

// Attributes only — no events — so React 18/19 can render the element directly.
// Boolean attrs (dot/showZero) are the attribute PRESENCE, so spread them conditionally.
function AhaBadge({ count, overflowCount, dot, status, text, color, showZero, ribbon, placement,
                    tone, plan, cycle, rank, session, href, children }) {
  return (
    <aha-badge
      count={count}
      overflow-count={overflowCount}
      status={status}
      text={text}
      color={color}
      placement={placement}
      tone={tone}
      plan={plan}
      cycle={cycle}
      rank={rank}
      session={session}
      href={href}
      {...(dot ? { dot: '' } : {})}
      {...(showZero ? { 'show-zero': '' } : {})}
      {...(ribbon ? { ribbon: '' } : {})}
    >
      {children}
    </aha-badge>
  );
}

// count over a wrapped child
<AhaBadge count={unread} overflowCount={99}>
  <BellIcon />
</AhaBadge>

// a standalone status badge — a semantic dot + label
<AhaBadge status="processing" text="Generating" />

// a corner ribbon banner wrapping a card (placement start/end)
<AhaBadge ribbon text="New">
  <TemplateCard />
</AhaBadge>

// a tinted TONE label chip
<AhaBadge tone="essential">Essential</AhaBadge>

// a PLAN preset chip (pro/enterprise show a crown; cycle appends the billing cycle)
<AhaBadge plan="pro" cycle="yearly" />

// a leaderboard RANK chip + a SESSION chip
<AhaBadge rank={1} />
<AhaBadge session={3} />

// CLICKABLE = a LINK (<a href>), NOT a button — navigates to upgrade, animates on hover
<AhaBadge plan="pro" href="/billing/upgrade" />

// main.ts — register the elements + mark aha-* as custom elements
import '@ahaslides-product/design/aha-badge';
import '@ahaslides-product/design/icons';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<script setup>
import { ref } from 'vue';
const unread = ref(128);
</script>

<template>
  <!-- count over a wrapped child, capped as N+ -->
  <aha-badge :count="unread" overflow-count="99">
    <aha-icon name="system-bell" size="24" />
  </aha-badge>

  <!-- a standalone status badge — a semantic dot + label -->
  <aha-badge status="processing" text="Generating" />

  <!-- a corner ribbon banner wrapping a card (placement start/end) -->
  <aha-badge ribbon text="New">
    <div class="template-card">Quiz template</div>
  </aha-badge>

  <!-- a tinted TONE label chip -->
  <aha-badge tone="essential">Essential</aha-badge>

  <!-- a PLAN preset chip (pro/enterprise show a crown; cycle appends the billing cycle) -->
  <aha-badge plan="pro" cycle="yearly" />

  <!-- a leaderboard RANK chip + a SESSION chip -->
  <aha-badge rank="1" />
  <aha-badge session="3" />

  <!-- CLICKABLE = a LINK (<a href>), NOT a button — navigates to upgrade, animates on hover -->
  <aha-badge plan="pro" href="/billing/upgrade" />
</template>