Skip to content
design system
Thème d’affichage, actuellement Auto

Pattern · actions

Disabled with reason

A control that refuses says why, next to it, tied to it; and it becomes available the moment the condition is met, without a reload.

The pattern, live

Tranchez les 106 critères et relisez le rapport pour publier.

How it works

  1. The page computes one sentence from what is missing, and gives it to the button as reason.
  2. With a reason, the button is disabled and the sentence is written next to it, tied by aria-describedby; without, the button is an ordinary button.
  3. The sentence changes as the conditions change, so the user always reads what is still missing.
  4. Once available, the action announces its outcome through a live region.

Rules a page that copies it keeps

  • A disabled control without a reason is a dead end; write the reason or hide the control.
  • The reason says what to do, not what is wrong: "Relisez le rapport pour publier", not "Rapport non relu".
  • Busy is not disabled: a button waiting on the server keeps the focus and says busy.

Built with