Add new button colors (success and error) #227 #241 #342

1 files changed, 16 insertions, 0 deletions

diff --git a/docs/elements.html b/docs/elements.html
index 1c39427..18949e7 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -698,6 +698,22 @@
 &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;link button&lt;<span class="tag">/button</span>&gt;
 </code></pre>
 
+        <h4 id="buttons-colors" class="s-subtitle">Button colors</h4>
+        <div class="columns">
+          <div class="column col-12">
+            <button class="btn btn-success">success button</button>
+            <button class="btn btn-error">error button</button>
+          </div>
+        </div>
+        <div class="docs-note">
+          <p>Add the <code>btn-success</code> or <code>btn-error</code> class for success (green) or error (red) button color. If you need more button colors, please use <a href="getting-started.html#variables-buttons">button mixins</a> to create your own button color variants. </p>
+        </div>
+
+<!-- buttons -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-success&quot;</span>&gt;success button&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-error&quot;</span>&gt;error button&lt;<span class="tag">/button</span>&gt;
+</code></pre>
+
         <h4 id="buttons-sizes" class="s-subtitle">Button sizes</h4>
         <div class="columns">
           <div class="column col-12">