Is it possible to modify the button icon on hover by utilizing chakra-ui and vanilla-extract?

Question

Is it possible to modify the button icon on hover by utilizing chakra-ui and vanilla-extract?

My stack includes nextjs13, chakra-ui, and vanilla-extract

Seeking guidance on how to update both icon and text within a button upon hover, utilizing chakra-ui and vanilla-extract.

The current setup of my button is as follows:

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

I aim to display the 'follow' button with icon A if the logged-in user is not following the individual.
Likewise, I want to showcase "following" with icon A if the logged-in user already follows the individual.

When hovering over the button (and the current user follows the individual), I desire a transition in the button's text: from "following" to "unfollow" with red text color, as well as an alteration in the icon from iconA to iconB.

I managed to adjust the text color by applying CSS to span:

<span className={textCss}>following</span>

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

However, I am unsure of how to modify both the text and the icon simultaneously.

css reactjs next.js chakra-ui vanilla-extract

Answer 1

Answer №1

One possible approach is:

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

To style the button and text using vanilla extract, you can do:

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

You can refer to Vanilla extract's thorough documentation here.

Answer 2

One possible approach is:

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

To style the button and text using vanilla extract, you can do:

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

You can refer to Vanilla extract's thorough documentation here.

Answer 3

Answer №2

One way I resolved the problem was by introducing a new state variable called 'isHover'.

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

<Button onMouseEnter={() => setIsHover(true)}
        onMouseLeave={() => setIsHover(false)}>
 <svg width="16" height="18">
  <use xlinkHref={ !isSelected && isHover? path/to/imageB: path/to/imageA }> 
  </use>
 </svg>
 {!isSelected ? <span>select</span> : <span>selected</span>}
</Button>

Answer 4

One way I resolved the problem was by introducing a new state variable called 'isHover'.

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

<Button onMouseEnter={() => setIsHover(true)}
        onMouseLeave={() => setIsHover(false)}>
 <svg width="16" height="18">
  <use xlinkHref={ !isSelected && isHover? path/to/imageB: path/to/imageA }> 
  </use>
 </svg>
 {!isSelected ? <span>select</span> : <span>selected</span>}
</Button>

Answer 5

Answer №3

Should you find yourself in need of altering the hue of an icon that already exists, a quick fix is to update the SVG file by replacing all instances of fill="curentColor" throughout the document. After making this adjustment, you can apply the following CSS code: svg:hover { fill: red; }, which will allow you to change the color upon hovering over the icon.

Answer 6

Should you find yourself in need of altering the hue of an icon that already exists, a quick fix is to update the SVG file by replacing all instances of fill="curentColor" throughout the document. After making this adjustment, you can apply the following CSS code: svg:hover { fill: red; }, which will allow you to change the color upon hovering over the icon.

Is it possible to modify the button icon on hover by utilizing chakra-ui and vanilla-extract?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to display JSX/HTML content that is stored in a variable or passed through

What level of trust can be placed in MUI Global Class names when using JSS?

Differentiating page URLs in NextJS based on language

Combining left-aligned and centered elements within a grid using flexbox

Is it possible for media queries to effectively support mobile devices?

Retrieve information and update state right before component display in React Native

Dynamically altering the CSS4 variables in real time

What makes the nav class different from the navbar class in Bootstrap?

Expanding Side Panel feature in Bootstrap 4+

Unable to locate the 'worker_threads' module using Node version 16.14.2

How about designing a button with a dual-layered border for a unique touch

Setting a default currency value (either in dollars or euros) in an input field

Attempting to imitate the hover effect of a scroll-down button

Is there a way to incorporate an 'input' type within an Icon Button component from Material UI in a React project?

Troubleshooting tips for resolving issues when launching Nx React + Express

Why is my array.sort statement in ReactJS not functioning properly?

Effortless gliding towards the left

What is the method for attaching a keypress event to an HTML document?

`How can you indicate a clicked linkbutton from a group of linkbuttons in asp.net?`

Are DIV elements really impossible to click using selenium Web Driver?