diff --git a/src/components/SideBar/ExpandButton.tsx b/src/components/SideBar/ExpandButton.tsx
index 9a9550537..379d6be95 100644
--- a/src/components/SideBar/ExpandButton.tsx
+++ b/src/components/SideBar/ExpandButton.tsx
@@ -1,26 +1,16 @@
 import { ButtonProps } from "@material-ui/core/Button";
-import ButtonBase from "@material-ui/core/ButtonBase";
 import makeStyles from "@material-ui/core/styles/makeStyles";
 import ArrowIcon from "@material-ui/icons/ArrowBack";
 import classNames from "classnames";
 import React from "react";
 
+import SquareButton from "../SquareButton";
+
 const useStyles = makeStyles(
   theme => ({
     arrow: {
       transition: theme.transitions.duration.shortest + "ms"
     },
-    root: {
-      "&:hover, &:focus": {
-        background: "#daedeb"
-      },
-      background: theme.palette.background.paper,
-      borderRadius: 16,
-      color: theme.palette.primary.main,
-      height: 48,
-      transition: theme.transitions.duration.shortest + "ms",
-      width: 48
-    },
     shrunk: {
       transform: "scaleX(-1)"
     }
@@ -34,21 +24,17 @@ export interface ExpandButtonProps extends ButtonProps {
   isShrunk: boolean;
 }
 
-const ExpandButton: React.FC<ExpandButtonProps> = ({
-  className,
-  isShrunk,
-  ...rest
-}) => {
+const ExpandButton: React.FC<ExpandButtonProps> = ({ isShrunk, ...rest }) => {
   const classes = useStyles({});
 
   return (
-    <ButtonBase className={classNames(classes.root, className)} {...rest}>
+    <SquareButton {...rest}>
       <ArrowIcon
         className={classNames(classes.arrow, {
           [classes.shrunk]: isShrunk
         })}
       />
-    </ButtonBase>
+    </SquareButton>
   );
 };
 
diff --git a/src/components/SquareButton/SquareButton.stories.tsx b/src/components/SquareButton/SquareButton.stories.tsx
new file mode 100644
index 000000000..2458c5d9f
--- /dev/null
+++ b/src/components/SquareButton/SquareButton.stories.tsx
@@ -0,0 +1,14 @@
+import CloseIcon from "@material-ui/icons/Close";
+import Decorator from "@saleor/storybook/Decorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import SquareButton from "./SquareButton";
+
+storiesOf("Generics / Square Button", module)
+  .addDecorator(Decorator)
+  .add("default", () => (
+    <SquareButton>
+      <CloseIcon />
+    </SquareButton>
+  ));
diff --git a/src/components/SquareButton/SquareButton.tsx b/src/components/SquareButton/SquareButton.tsx
new file mode 100644
index 000000000..5e69a2fd9
--- /dev/null
+++ b/src/components/SquareButton/SquareButton.tsx
@@ -0,0 +1,34 @@
+import ButtonBase, { ButtonBaseProps } from "@material-ui/core/ButtonBase";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import classNames from "classnames";
+import React from "react";
+
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      "&:hover, &:focus": {
+        background: "#daedeb"
+      },
+      background: theme.palette.background.paper,
+      borderRadius: 16,
+      color: theme.palette.primary.main,
+      height: 48,
+      transition: theme.transitions.duration.shortest + "ms",
+      width: 48
+    }
+  }),
+  {
+    name: "ExpandButton"
+  }
+);
+
+const SquareButton: React.FC<ButtonBaseProps> = ({ className, ...rest }) => {
+  const classes = useStyles({});
+
+  return (
+    <ButtonBase className={classNames(classes.root, className)} {...rest} />
+  );
+};
+
+SquareButton.displayName = "SquareButton";
+export default SquareButton;
diff --git a/src/components/SquareButton/index.ts b/src/components/SquareButton/index.ts
new file mode 100644
index 000000000..7f406f96b
--- /dev/null
+++ b/src/components/SquareButton/index.ts
@@ -0,0 +1,2 @@
+export * from "./SquareButton";
+export { default } from "./SquareButton";