Merge pull request #304 from alphagov/add-guidance-for-disabled-buttons

Add bullet points describing use of disabled buttons

app/views/guide_buttons.html

@@ -81,12 +81,15 @@ <h3 class="heading-medium" id="button-alignment">Button alignment</h3>
   </div>
 
   <h3 class="heading-medium" id="button-disabled">Disabled buttons</h3>
-  <p>
-    Disabled buttons should be set at 50% opacity.
-  </p>
+  <ul class="list list-bullet text">
+    <li>don’t disable buttons, unless there’s a good reason to</li>
+    <li>if you have to disable buttons, make sure they look like you can't click them (use 50% opacity)</li>
+    <li>an example of a useful disabled option is a calendar with greyed out days where no bookings are available</li>
+    <li>provide another way for the user to continue, add an error message or text to explain why the button is disabled</li>
+  </ul>
 
 <div class="example">
-  <button class="button" disabled="disabled">Primary button</button>
+  <button class="button" disabled="disabled">Disabled primary button</button>
 </div>
 
 <pre>