Disabling a button without explaining why
A greyed-out "Submit" button with no hint about what's missing forces users to guess what they did wrong.
The wrong way
Disabling the form submit button when required fields are empty, with no inline indication of which field is the blocker.
<Button
variant="primary"
disabled={!isFormValid}
onClick={submit}
>
Save
</Button>Why
Disabled controls are silent. The user knows something is wrong but not what. They click around, scan the form, sometimes give up. This is the opposite of principle 14 (Design for error prevention and recovery) — it makes prevention adversarial. People with cognitive disabilities and screen reader users are hit hardest, because the disabled state doesn't announce a reason.
The right way
Keep the button enabled, show inline validation as the user moves through the form, and produce a focused, specific error if submission is attempted with missing required values. Or — at minimum — keep the button disabled but pair it with a visible hint listing what's missing.
<Button variant="primary" onClick={submit}>Save</Button>
{missingFields.length > 0 && (
<p id="form-help" className="helperText">
Required: {missingFields.join(', ')}
</p>
)}