diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index 450254376..da16f7551 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -2,6 +2,7 @@
.Button,
.Button:visited {
+ display: inline-block;
padding: rem(5) rem(12);
border: none;
margin-bottom: 0;
@@ -29,11 +30,13 @@
border-radius: 0;
&:first-child {
- border-radius: border-radius() 0 0 border-radius();
+ border-top-left-radius: border-radius();
+ border-bottom-left-radius: border-radius();
}
&:last-child {
- border-radius: 0 border-radius() border-radius() 0;
+ border-top-right-radius: border-radius();
+ border-bottom-right-radius: border-radius();
}
}
@@ -54,6 +57,8 @@
}
&:focus {
+ position: relative;
+ z-index: 1;
outline: 0;
border: 1px solid color(blue);
box-shadow: 0 0 0 1px color(blue);
diff --git a/src/components/Button/Group.js b/src/components/Button/Group.js
index bd3fedc2e..75e945a05 100644
--- a/src/components/Button/Group.js
+++ b/src/components/Button/Group.js
@@ -16,4 +16,6 @@ Group.propTypes = {
]).isRequired
};
+Group.displayName = 'Button.Group';
+
export default Group;
diff --git a/stories/Button.js b/stories/Button.js
index 3f4d7fcfd..836d6724e 100644
--- a/stories/Button.js
+++ b/stories/Button.js
@@ -79,4 +79,12 @@ export default storiesOf('Button', module)
.addWithInfo('External', () => (
+ ))
+
+ .addWithInfo('Group', () => (
+
+
+
+
+
));