From 0e55872a45f02bd62a8a074c7dad3d72914e18aa Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Thu, 24 Oct 2019 13:25:29 +0900
Subject: [PATCH] Add .close-button

Unchanged from dotcom
---
 docs/content/components/buttons.md | 11 +++++++++++
 src/buttons/misc.scss              |  8 ++++++++
 2 files changed, 19 insertions(+)

diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md
index 5252a306..e1909e49 100644
--- a/docs/content/components/buttons.md
+++ b/docs/content/components/buttons.md
@@ -118,6 +118,17 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `<
 <button class="btn-link" type="button">Link button</button>
 ```
 
+## Close button
+
+When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
+
+```html live
+<button class="close-button" type="button">
+  <!-- <%= octicon "x" %> -->
+  <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z" /></svg>
+</button>
+```
+
 ## Button with counts
 
 You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button.
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 40f7a30d..bb64ea97 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -1,5 +1,13 @@
 // stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors
 
+// A button with an X to close stuff
+.close-button {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+}
+
 // Hidden text button
 //
 // Use `.hidden-text-expander` to indicate and expand hidden text.