Add hover state in StoryBook for Button

Question

How can I add a hover state to my button storybook function?

I can add the button to my Storybook docs, like this:

import ButtonClose from './ButtonClose';

const StoryMeta = {
  title: `Components/Button/ButtonClose`,
  component: ButtonClose,
};

export default StoryMeta;

const Template = (args) => <ButtonClose {...args} />;

export const Default = Template.bind({});

However, I can't seem to figure out how to activate the hover state of my button, which looks like this:

import React from 'react';
import { IconButton } from '@mui/material';
import SvgIcons from '../SvgIcons';

const ButtonClose = ({ onClick, className }) => (
  <IconButton
    sx={{
      width: '40px',
      height: '40px',
      '&:hover': {
        bgcolor: palette.primary.dark,
    }}
    onClick={onClick}
    className={className}
  >
    <SvgIcons icon="close-button" />
  </IconButton>
);

export default ButtonClose;

Does this answer your question? [Mock hover state in Storybook?](https://stackoverflow.com/questions/62043424/mock-hover-state-in-storybook) — evolutionxbox, Dec 22 '21 at 16:02
Unfortunately no :(. I don't know how I could implement this in my code. — WillemK, Dec 22 '21 at 16:06

score 0 · Answer 1 · answered Dec 22 '21 at 17:38

Try onMouseEnrer event in your button You can define a boolean state and by onMouseEnter and onMouseLeave change the value of your state Then use conditional operation for bgColor. For example : const [isHover,setIsHover] = useState(false)

And in button :

<IconButton
   onMouseEnter={()=>setIsHover(true)}
   onMouseLeave={()=>setIsHover(false)}
   sx={{
        width: '40px',
        height: '40px',
        bgColor:(theme)=>isHover?        theme.palette.primary.dark:theme.palette.primary.light
  }}
 >

Add hover state in StoryBook for Button

1 Answers1