Buttons: Disabled

Notes

  • use buttons to move though a transaction
  • aim to use only one button per page
  • button text should be short and describe the action the button performs

Start now button

Launch your service with a Start now button.

Disabled buttons

  • don’t disable buttons, unless there’s a good reason to
  • if you have to disable buttons, make sure they look like you can’t click them (use 50% opacity)
  • an example of a useful disabled option is a calendar with greyed out days where no bookings are available
  • provide another way for the user to continue, add an error message or text to explain why the button is disabled
<input class="button " type="submit" value="This is a disabled button" disabled="disabled">
 
{% if type == "link" %}
<a class="button {{ modifier }}{% if disabled %} disabled{% endif%}" href="{{ url }}" role="button">{{ text }}</a>
{% else %}
<input class="button {{ modifier }}" type="submit" value="{{ text }}"{% if disabled %} disabled="disabled"{% endif%}>
{% endif %}



{
  "disabled": true,
  "text": "This is a disabled button"
}