storybook-mobile/.storybook/testStories/stories/1-IconButton.stories.js

This addon offers suggestions on how you can improve the HTML, CSS and UX of your components to be more mobile-friendly.

import React from 'react'
import styled from 'styled-components'
import { InfoSignIcon } from 'evergreen-ui'

const InvisibleButton = styled.button`
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  font-size: 100%;
  background-color: transparent;
  appearance: none;
  box-shadow: none;
  margin: 1rem;
  -webkit-tap-highlight-color: hsla(0, 0%, 0%, 0);
`
const IconButton = () => (
  <InvisibleButton>
    <InfoSignIcon color="info" />
  </InvisibleButton>
)

export const Default = () => <IconButton />

export default {
  title: 'Icon Button',
  component: IconButton,
}