Tag

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-tag> 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.
     Icons are summoned by name from the DS icon library via <aha-icon>. -->
<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-tag.js';  // registers <aha-tag>
</script>

<div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap">
  <aha-tag color="primary" icon="system-tag">Poll</aha-tag>
  <aha-tag color="success" icon="system-check">Published</aha-tag>
  <aha-tag bordered color="processing">Scheduled</aha-tag>
  <aha-tag closable id="kw">Marketing</aha-tag>
  <aha-tag checkable checked id="filter">Quizzes only</aha-tag>
</div>

<script>
  // closable: fires `close`, then the tag animates out + removes itself
  document.getElementById('kw').addEventListener('close', () => console.log('removed'));
  // checkable: fires `change` with { checked }
  document.getElementById('filter').addEventListener('change', (e) => console.log('checked', e.detail.checked));
</script>

import '@ahaslides-product/design/icons';   // registers <aha-icon>
import '@ahaslides-product/design/aha-tag'; // registers <aha-tag>
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper for the composed `close` / `change` events; React 19 can bind directly.
function AhaTag({ color, bordered, icon, closable, checkable, checked, onClose, onChange, children }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const c = () => onClose?.();
    const ch = (e) => onChange?.(e.detail.checked);
    el.addEventListener('close', c);
    el.addEventListener('change', ch);
    return () => { el.removeEventListener('close', c); el.removeEventListener('change', ch); };
  });
  return (
    <aha-tag ref={ref} color={color} icon={icon}
      {...(bordered ? { bordered: '' } : {})}
      {...(closable ? { closable: '' } : {})}
      {...(checkable ? { checkable: '' } : {})}
      {...(checked ? { checked: '' } : {})}
    >{children}</aha-tag>
  );
}

// usage
<AhaTag color="primary" icon="system-tag">Poll</AhaTag>
<AhaTag color="success" bordered icon="system-check">Published</AhaTag>
<AhaTag closable onClose={() => removeKeyword('Marketing')}>Marketing</AhaTag>
<AhaTag checkable checked onChange={(on) => setFilter(on)}>Quizzes only</AhaTag>

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

// Component.vue
<script setup>
import { ref } from 'vue';
const keywords = ref(['Poll', 'Marketing']);
const quizzesOnly = ref(true);
</script>

<template>
  <aha-tag color="primary" icon="system-tag">Poll</aha-tag>
  <aha-tag color="success" bordered icon="system-check">Published</aha-tag>
  <aha-tag
    closable
    @close="keywords = keywords.filter(k => k !== 'Marketing')"
  >Marketing</aha-tag>
  <aha-tag
    checkable
    :checked="quizzesOnly || undefined"
    @change="quizzesOnly = $event.detail.checked"
  >Quizzes only</aha-tag>
</template>