css Question posted in
Some basic documentation can be found here.

Css – How can I change icon inside button on hover using chakra-ui and vanilla-extract?

  • I am using nextjs13, chakra-ui, and vanilla-extract

Does anyone know how to change icon and text inside button on hover, using chakra-ui and vanilla-extract?

I have a button like this:

<Button >
 <svg width="16" height="18">
  <use xlinkHref={path/to/iconA}></use>
 </svg>
{!isFollowing ? <span>follow</span> : <span>following</span>}
</Button>

I want to show ‘follow’ button with icon A if logged in user is not following the user.
I want to show "following" with icon A if logged in user is following the user.

When I hover the button(and logged in user is currently following the user),
I want to change button text: from "following" to "unfollow" with red text color and icon: from iconA to iconB.

I could change the text color by adding css to span:
<span className={textCss}>following</span>

const textCss = style({
":hover":{
color:"red"
}})

but not sure how to change the text and icon.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved issue by adding 'isHover' as state variable.

    const [isHover, setIsHover] = useState(false);

<Button onMouseEnter={() => setIsHover(true)}
        onMouseLeave={() => setIsHover(false)}>
 <svg width="16" height="18">
  <use xlinkHref={ !isFollowing && isHover? path/to/iconB: path/to/iconA}> 
  </use>
 </svg>
 {!isFollowing ? <span>follow</span> : <span>following</span>}
</Button>

  2. 0

    You could do the following

    import * as styles from './styles.css'
<Button className={styles.button}>
 <svg width="16" height="18">
  <use xlinkHref={isFollowing ? 'path/to/iconA' : 'path/to/iconAB'}></use>
 </svg>
<span className={styles.buttonText}>{isFollowing ? 'unfollow' : 'follow'}</span>
</Button>

    and for your vanilla extract css file you could do something like this

    export const button = style({})
export const buttonText = style({
    selectors: {
        `${button}:hover &`: { 
             color: 'red'
         }
     }
})

    Vanilla extract provide some good documentation that can be found here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search