When to use

• Unavailable actions – If a feature is not yet accessible (e.g., “Submit” button before filling out a form).

• Permissions or restrictions – When a user lacks access to a specific function (e.g., “Delete” option for non-admin users).

• Incomplete steps – When an action depends on a previous step being completed (e.g., checkout button before selecting a payment method).

Best practices

• Clearly indicate the disabled state – Use lower opacity and remove interactive behaviors like hover effects.

• Provide explanations – If possible, let users know why an element is disabled and how to enable it.

• Avoid disabling key actions – Instead of disabling, consider guiding users with tooltips or inline messages.

<button disabled>Submit</button>
<input type="text" disabled placeholder="Unavailable"

Disabled states should always feel intentional and not confusing, ensuring users understand what’s happening and how to proceed.