Result

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-result> is the SAME shared custom element React and Vue consume — here in its native
     form. Its status glyph is the shared <aha-icon>, loaded automatically by the element.
     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-result.js';   // registers <aha-result> (+ <aha-icon>)
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-button.js';   // registers <aha-button>
</script>

<!-- status: success | error | info | warning | 404 | 403 | 500 -->
<aha-result status="success" result-title="Presentation published" subtitle="Share the join link with your audience.">
  <aha-button slot="extra" variant="primary">Copy join link</aha-button>
</aha-result>

<!-- a not-found / forbidden / server route -->
<aha-result status="404" result-title="Presentation not found" subtitle="It may have been deleted or the link is wrong.">
  <aha-button slot="extra" variant="primary">Back to dashboard</aha-button>
</aha-result>

<!-- override the status glyph with any DS icon by name -->
<aha-result status="warning" icon="system-shield-warning" result-title="Verify your account"
  subtitle="Confirm your email to keep presenting."></aha-result>

import '@ahaslides-product/design/aha-result';   // registers <aha-result> (+ <aha-icon>)
import '@ahaslides-product/design/aha-button';

// Attributes only — no events — so React 18/19 can render the element directly.
function AhaResult({ status, title, subtitle, children }) {
  return (
    <aha-result status={status} result-title={title} subtitle={subtitle}>
      {children}
    </aha-result>
  );
}

// usage
<AhaResult status="success" title="Presentation published" subtitle="Share the join link with your audience.">
  <aha-button slot="extra" variant="primary">Copy join link</aha-button>
</AhaResult>

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

// Component.vue
<template>
  <aha-result
    status="success"
    result-title="Presentation published"
    subtitle="Share the join link with your audience."
  >
    <aha-button slot="extra" variant="primary">Copy join link</aha-button>
  </aha-result>
</template>