Button

<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.
     <aha-button> 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/aha-button.js';   // registers <aha-button>
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/icons.js';   // registers <aha-icon> for the icon slot
</script>

<div style="display:flex; gap:8px">
  <aha-button variant="secondary">Cancel</aha-button>
  <aha-button variant="primary" onclick="alert('Saved')">
    <span slot="icon"><aha-icon name="system-plus" size="16" decorative></aha-icon></span>
    Save changes
  </aha-button>
</div>

<!-- Size + variant are attributes; never inline height/padding/radius/fontSize. -->
<aha-button variant="primary" size="lg" block>Get started</aha-button>
<aha-button icon-only variant="tertiary" aria-label="Close"><aha-icon name="system-x" size="16" decorative></aha-icon></aha-button>

<!-- Low-emphasis label buttons: text / text-link are borderless. primary-alt is a second primary slot. -->
<aha-button variant="text">Skip</aha-button>
<aha-button variant="text-link">Learn more</aha-button>

import '@ahaslides-product/design/aha-button';   // registers <aha-button>
import '@ahaslides-product/design/icons';   // registers <aha-icon> for the icon slot
import { useRef } from 'react';

// React 19 can use <aha-button> directly; React 18 uses this thin wrapper so onClick + slots work.
function AhaButton({ variant = 'secondary', size = 'md', disabled, loading, iconOnly, icon, children, ...rest }) {
  const ref = useRef();
  return (
    <aha-button
      ref={ref}
      variant={variant}
      size={size}
      {...(disabled ? { disabled: true } : {})}
      {...(loading ? { loading: true } : {})}
      {...(iconOnly ? { 'icon-only': true } : {})}
      {...rest}
    >
      {icon ? <span slot="icon">{icon}</span> : null}
      {children}
    </aha-button>
  );
}

export function SaveBar({ onSave, saving }) {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <AhaButton variant="secondary">Cancel</AhaButton>
      <AhaButton variant="primary" loading={saving} onClick={onSave}
        icon={<aha-icon name="system-plus" size={16} decorative />}>
        Save changes
      </AhaButton>
    </div>
  );
}

<!-- Vue 3 consumes the same <aha-button> custom element natively.
     Tell the compiler it's a custom element (vite: compilerOptions.isCustomElement = t => t.startsWith('aha-')). -->
<script setup>
import '@ahaslides-product/design/aha-button';   // registers <aha-button>
import '@ahaslides-product/design/icons';   // registers <aha-icon> for the icon slot
defineProps({ saving: Boolean });
const emit = defineEmits(['save']);
</script>

<template>
  <div style="display:flex; gap:8px">
    <aha-button variant="secondary">Cancel</aha-button>
    <aha-button variant="primary" :loading="saving" @click="emit('save')">
      <span slot="icon">
        <aha-icon name="system-plus" :size="16" decorative />
      </span>
      Save changes
    </aha-button>
  </div>
</template>