unkn0wn/nova-design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
LOUIS POTEVIN
2026-06-04 12:09:34 +02:00
parent c585ec3266
commit 5600107e53
4 changed files with 63 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button/_button.scss
+37
View File
@@ -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);
}
}