From bb88a9eeb86fdaedcf675dac2efb92c36f3284f0 Mon Sep 17 00:00:00 2001
From: Clinton <clinton.langosch@gmail.com>
Date: Mon, 21 Jun 2021 14:11:01 -0700
Subject: [PATCH] refactor: use Button from theme

---
 src/components/ImageSlider/ImageSlider.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/ImageSlider/ImageSlider.js b/src/components/ImageSlider/ImageSlider.js
index 2bd9e8c45..0dadaf37c 100644
--- a/src/components/ImageSlider/ImageSlider.js
+++ b/src/components/ImageSlider/ImageSlider.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { css } from '@emotion/react';
-import { Icon } from '@newrelic/gatsby-theme-newrelic';
+import { Button, Icon } from '@newrelic/gatsby-theme-newrelic';
 
 const ImageSlider = ({ images, height }) => {
   const [selectedImageIndex, setSelectedImageIndex] = useState(0);
@@ -29,8 +29,9 @@ const ImageSlider = ({ images, height }) => {
     >
       {images.length > 1 && (
         <>
-          <button
+          <Button
             onClick={handleClickPrev}
+            variant={Button.VARIANT.PLAIN}
             css={css`
               position: absolute;
               top: 38%;
@@ -42,9 +43,10 @@ const ImageSlider = ({ images, height }) => {
             `}
           >
             <Icon name="chevron-left" size="4rem" />
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={handleClickNext}
+            variant={Button.VARIANT.PLAIN}
             css={css`
               position: absolute;
               top: 38%;
@@ -56,7 +58,7 @@ const ImageSlider = ({ images, height }) => {
             `}
           >
             <Icon name="chevron-right" size="4rem" />
-          </button>
+          </Button>
         </>
       )}
       <a