Alert

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-alert> is the SAME shared custom element React and Vue consume — here in its
     native form. Importing it also registers <aha-icon> for the status glyph. 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/aha-alert.js';   // registers <aha-alert> (+ <aha-icon>)
</script>

<div style="display:flex; flex-direction:column; gap:12px; max-width:520px">
  <aha-alert type="info" heading="Heads up">Your poll closes in 5 minutes.</aha-alert>
  <aha-alert type="success" size="small">Slide saved.</aha-alert>
  <aha-alert type="warning" heading="Almost at the limit">You have used 9 of 10 slides on the Free plan.</aha-alert>
  <aha-alert type="error" closable id="err">Upload failed — the file is over 20&nbsp;MB.</aha-alert>
  <aha-alert type="branding" heading="New: AI slide generation">
    Turn a prompt into a full deck.
    <button slot="action">Try it</button>
  </aha-alert>
</div>

<!-- banner = full-width, square-cornered page notice (drop it at the top of the layout) -->
<aha-alert type="warning" banner closable>Scheduled maintenance tonight 22:00–23:00 UTC.</aha-alert>

<script>
  document.getElementById('err').addEventListener('close', () => console.log('alert dismissed'));
</script>

import '@ahaslides-product/design/aha-alert';   // registers <aha-alert> (+ <aha-icon>)
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper for the composed `close` event; React 19 can bind onClose directly.
function AhaAlert({ type, heading, size, banner, hideIcon, closable, onClose, action, children }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const h = () => onClose?.();
    el.addEventListener('close', h);
    return () => el.removeEventListener('close', h);
  });
  return (
    <aha-alert
      ref={ref}
      type={type}
      {...(heading ? { heading } : {})}
      {...(size ? { size } : {})}
      {...(banner ? { banner: '' } : {})}
      {...(hideIcon ? { 'hide-icon': '' } : {})}
      {...(closable ? { closable: '' } : {})}
    >
      {children}
      {action ? <span slot="action">{action}</span> : null}
    </aha-alert>
  );
}

// usage
<AhaAlert type="success" heading="Saved">Your changes are live.</AhaAlert>
<AhaAlert type="branding" heading="New: AI slides" action={<button>Try it</button>}>Turn a prompt into a deck.</AhaAlert>
<AhaAlert type="warning" banner closable onClose={() => setBanner(null)}>Scheduled maintenance tonight.</AhaAlert>
<AhaAlert type="error" size="small" closable onClose={() => setBanner(null)}>Upload failed — try a smaller file.</AhaAlert>

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

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

<template>
  <aha-alert type="success" heading="Saved">Your changes are live.</aha-alert>
  <aha-alert type="branding" heading="New: AI slides">
    Turn a prompt into a deck.
    <button slot="action">Try it</button>
  </aha-alert>
  <aha-alert type="error" size="small">Upload failed — try a smaller file.</aha-alert>
  <aha-alert
    v-if="banner"
    type="warning"
    banner
    closable
    @close="banner = false"
  >
    Scheduled maintenance tonight 22:00–23:00 UTC.
  </aha-alert>
</template>