14
1 min read
Anatomy, variants, and states
You shipped the default button. Secondary came later. Disabled was a one-off. The matrix was never written down, so it never stayed coherent.
A component is anatomy first: the parts you name. Then variants, then states. Every cell is token-driven. If a state is missing, it is a future bug, not a later polish pass.
One default button on the left — secondary and disabled never got written. Variants and states on the right were defined first.
primary · default
secondary · missing
disabled · missing
secondaryundefined
disabledundefined
primary · default
secondary · default
primary · disabled
secondary · disabled
variantprimary · secondary
statedefault · disabled
Variants and states, written down. Primary and secondary. Default and disabled. You define the matrix before the first pull request, not after the third visual bug.
:root {
--color-primary: #111111;
--button-bg: var(--color-primary);
--button-fg: #ffffff;
--button-border: var(--color-primary);
--button-radius: 8px;
}
.button {
background: var(--button-bg);
color: var(--button-fg);
border-color: var(--button-border);
border-radius: var(--button-radius);
}
.button--primary { --button-bg: var(--color-primary); }
.button--secondary { --button-bg: transparent; }
.button:disabled { opacity: 0.45; }:root {
--color-primary: #111111;
--button-bg: var(--color-primary);
--button-fg: #ffffff;
--button-border: var(--color-primary);
--button-radius: 8px;
}
.button {
background: var(--button-bg);
color: var(--button-fg);
border-color: var(--button-border);
border-radius: var(--button-radius);
}
.button--primary { --button-bg: var(--color-primary); }
.button--secondary { --button-bg: transparent; }
.button:disabled { opacity: 0.45; }