diff --git a/n-link-core/components/AppButton.spec.ts b/n-link-core/components/AppButton.spec.ts
new file mode 100644
index 0000000..29979e7
--- /dev/null
+++ b/n-link-core/components/AppButton.spec.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AppButton from './AppButton.vue';
+
+describe('AppButton', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(AppButton, { slots: { default: 'Download' } });
+    expect(wrapper.text()).toBe('Download');
+  });
+
+  it('applies the primary accent style by default', () => {
+    const wrapper = mount(AppButton, { slots: { default: 'Go' } });
+    expect(wrapper.get('button').classes()).toContain('bg-accent');
+  });
+
+  it('applies the danger variant', () => {
+    const wrapper = mount(AppButton, {
+      props: { variant: 'danger' }, slots: { default: 'Delete' },
+    });
+    expect(wrapper.get('button').classes()).toContain('bg-danger');
+  });
+
+  it('emits click when enabled', async () => {
+    const wrapper = mount(AppButton, { slots: { default: 'Go' } });
+    await wrapper.get('button').trigger('click');
+    expect(wrapper.emitted('click')).toHaveLength(1);
+  });
+
+  it('reflects the disabled prop', () => {
+    const wrapper = mount(AppButton, {
+      props: { disabled: true }, slots: { default: 'Go' },
+    });
+    expect(wrapper.get('button').attributes('disabled')).toBeDefined();
+  });
+});
diff --git a/n-link-core/components/AppButton.vue b/n-link-core/components/AppButton.vue
new file mode 100644
index 0000000..28ba0e0
--- /dev/null
+++ b/n-link-core/components/AppButton.vue
@@ -0,0 +1,31 @@
+<template>
+  <button class="rounded font-bold focus:outline-none focus-visible:ring-2
+                 focus-visible:ring-accent transition-colors disabled:opacity-75
+                 disabled:cursor-not-allowed"
+          :class="[variantClass, sizeClass]" :disabled="disabled">
+    <slot/>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  variant?: 'primary' | 'secondary' | 'danger' | 'success';
+  size?: 'md' | 'sm';
+  disabled?: boolean;
+}>(), {
+  variant: 'primary',
+  size: 'md',
+  disabled: false,
+});
+
+const variantClass = computed(() => ({
+  primary: 'bg-accent text-accent-fg',
+  secondary: 'bg-raised text-fg border border-edge',
+  danger: 'bg-danger text-white',
+  success: 'bg-success text-white',
+}[props.variant]));
+
+const sizeClass = computed(() => (props.size === 'sm' ? 'px-3 py-2 text-sm' : 'px-6 py-2.5'));
+</script>