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

Challenges with Spreading Props in TextField Component After MUIv4 Upgrade with TypeScript

Choose items that do not contain ::before or ::after pseudo-elements

Avoid the use of the escape key

How can I implement a SWR refresh from a button click in a child component using a callback function?

The issue with jspdf is that it is failing to generate PDF documents of

How to Create a Hover Drop Down Menu that Disappears When Not Hovered Over

The JQuery loading symbol does not prevent keyboard interactions

Repair the masthead background during overscroll

Error in React + Jest unit test caused by Material-UI typography issue

What methods can I implement to ensure a button illuminates only when correct information is provided?

Error: The specified module could not be located and resolved: 'child_process'

Reactjs, encountering a hitch in utilizing material UI: Incompatible hook call detected

The integration of Next.js with a Custom Express Server results in incorrect content types being generated for woff and woff2 files

Rating component in Material UI accommodating lengthy values

Steps for changing the language in KeyboardDatePicker material ui

Tips for Aligning Images of Various Sizes in the Center of a div

The MUI component with hideBackDrop={true} is preventing me from clicking outside of the Drawer component to close it

The rule 'import/no-cycle' definition could not be located

"Implementation of Google+ button causing the appearance of a horizontal scrollbar

Is there a way to conditionally redirect to a specific page using NextAuth?