From a1c879b248b7b5a41e166a64160cb9dfd954772d Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Wed, 7 Sep 2016 15:25:20 +0100
Subject: [PATCH] Add bullet points describing use of disabled buttons

---
 app/views/guide_buttons.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/views/guide_buttons.html b/app/views/guide_buttons.html
index 59a7a0d08..b44f7cb0d 100755
--- a/app/views/guide_buttons.html
+++ b/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>