feat: add Button component with primary and secondary styles, including disabled state

2026-06-04 12:09:34 +02:00
parent c585ec3266
commit 5600107e53
4 changed files with 63 additions and 1 deletions
@@ -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);
+  }
+}
@@ -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>