From 5600107e5354fa5168f7448a84a1ec2387d3064a Mon Sep 17 00:00:00 2001
From: LOUIS POTEVIN <louis.potevin@legrand.com>
Date: Thu, 4 Jun 2026 12:09:34 +0200
Subject: [PATCH] feat: add Button component with primary and secondary styles,
 including disabled state

---
 src/components/Button/_button.scss | 37 ++++++++++++++++++++++++++++++
 src/components/Button/button.astro | 15 ++++++++++++
 src/components/index.ts            |  3 ++-
 src/pages/index.astro              |  9 ++++++++
 4 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Button/_button.scss
 create mode 100644 src/components/Button/button.astro

diff --git a/src/components/Button/_button.scss b/src/components/Button/_button.scss
new file mode 100644
index 0000000..8c19bc6
--- /dev/null
+++ b/src/components/Button/_button.scss
@@ -0,0 +1,37 @@
+@use '../../styles/tokens/typography' as *;
+
+.button { 
+  width: fit-content;
+  padding: var(--nds-spacing-sm) var(--nds-spacing-md);
+  border-radius: var(--nds-radius-sm);
+  @include text-base;
+  cursor: pointer;
+  &__primary {
+    background-color: var(--nds-primary);
+    color: var(--nds-text);
+    &:hover:not(.button--disabled) {
+      background-color: var(--nds-secondary);
+    }
+    &:active:not(.button--disabled) {
+      background-color: var(--nds-accent);
+      color: var(--nds-background);
+    }
+  }
+  &__secondary {
+    border: var(--nds-border-width-medium) solid;
+    border-color: var(--nds-primary);
+    color: var(--nds-primary);
+    &:hover:not(.button--disabled) {
+      border-color: var(--nds-secondary);
+    }
+    &:active:not(.button--disabled) {
+      border-color: var(--nds-accent);
+      color: var(--nds-accent);
+    }
+  }
+  &--disabled {
+    cursor: not-allowed;
+    background-color: var(--nds-disabled);
+    color: var(--nds-neutral);
+  }
+}
\ No newline at end of file
diff --git a/src/components/Button/button.astro b/src/components/Button/button.astro
new file mode 100644
index 0000000..e3381b9
--- /dev/null
+++ b/src/components/Button/button.astro
@@ -0,0 +1,15 @@
+---
+export interface Props {
+  type:        'primary' | 'secondary';
+  disabled?:   boolean;
+}
+const { type, disabled = false } = Astro.props;
+---
+
+<div class={`button button__${type} ${disabled ? 'button--disabled' : ''}`}>
+  <slot/>
+</div>
+
+<style lang="scss">
+@use './_button.scss';
+</style>
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 5801057..2ea01af 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -5,4 +5,5 @@ export { default as Notification } from './Notifications/notification.astro';
 export { default as Toggle }       from './Toggle/toggle.astro';
 export { default as Tab }          from './Tabs/tab.astro';
 export { default as TabItem }      from './Tabs/tabItem.astro';
-export { default as TabContent }   from './Tabs/tabContent.astro';
\ No newline at end of file
+export { default as TabContent }   from './Tabs/tabContent.astro';
+export { default as Button }       from './Button/button.astro';
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 22370fe..c0268b0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,6 +5,7 @@ import Toggle from '../components/Toggle/toggle.astro';
 import Tab from '../components/Tabs/tab.astro';
 import TabItem from '../components/Tabs/tabItem.astro';
 import TabContent from '../components/Tabs/tabContent.astro';
+import Button from '../components/Button/button.astro';
 import {
   Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
   CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
@@ -19,6 +20,14 @@ const initialChecked = true;
 <Layout>
   <main>
     <h1>Nova Design System</h1>
+    <section>
+      <h2>Button</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Button type="primary">Primary Button</Button>
+        <Button type="secondary">Secondary Button</Button>
+        <Button type="primary" disabled>disabled</Button>
+      </div>
+    </section>
     <section>
       <h2>Tabs</h2>
       <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">