feat(buttons): side by side buttons now have a -unit margin-left sepa…

…rating them [Finishes #143473153] Signed-off-by: Stephane Jolicoeur <sjolicoeur@pivotal.io>
pivotal-cf · May 9, 2017 · 4968e29 · 4968e29
1 parent 2a00730
commit 4968e29
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/library/src/pivotal-ui/components/buttons/buttons.scss b/library/src/pivotal-ui/components/buttons/buttons.scss
@@ -548,3 +548,7 @@
     fill: $btn-danger-color-hover;
   }
 }
+
+.btn + .btn {
+  margin-left: $base-unit;
+}
diff --git a/styleguide/docs/css/buttons.scss b/styleguide/docs/css/buttons.scss
@@ -174,4 +174,25 @@ They can also be icon buttons.
 </button>
 ```
 
+*/
+
+/*doc
+---
+title: Side-by-Side Buttons
+name: 05_button_and_button
+parent: button
+---
+
+Buttons side-by-side will be separated by a margin of `$base-unit`.
+
+```html_example_table
+<div>
+  <button class="btn btn-default-alt" type="button" aria-label="button">
+    Cancel
+  </button>
+  <button class="btn btn-default" type="button" aria-label="button">
+    Save
+  </button>
+</div>
+```
 */