Can't disable the animations and ripple effect for Button in React

[humble-codes]

Although the animation is good but for some reason I had like to disable the Animation and ripple effect on the component in my React.js project. I tried using the snippets given below but it didn't work out for me.

<Button animated = "false" ripple = "false" color="primary" auto> Click Me </Button>
or
<Button animated ripple color="primary" auto> Click Me </Button>

Can anyone guide me through this ?

[Eppu]

Hi! You should be able to disable animations or the ripple effect by passing the related props inside curly braces instead of passing them as static strings.
e.g. <Button animated={false} color="primary" auto>Click Me</Button>

[humble-codes]

@Eppu thnx for the help, just had one more doubt, what's the difference between ripple and animated props for the button ?

[humble-codes]

Also, I noticed that <Button disabled="true"> works as intended but <Button animated ="false"> doesn't work, instead we have to use <Button animated={false} >

Why is that so ?

[Eppu]

@Eppu thnx for the help, just had one more doubt, what's the difference between ripple and animated props for the button ?

No worries! The ripple prop only controls whether or not the "drip" animation inside the button is visible when pressed. animated controls both the drip effect, as well as scaling of the button when pressed.

Also, I noticed that <Button disabled="true"> works as intended but <Button animated ="false"> doesn't work, instead we have to use <Button animated={false} >

Why is that so ?

This is due to the way the disabled attribute is handled in standard HTML <button> elements.

In HTML, attribute values are always treated as strings, whereas in React, properties are generally passed as JavaScript expressions.

So when you write disabled="true", the string value "true" is passed to the component. In the case of animated="false", the string value "false" is passed.

However, when you use the syntax animated={false}, the boolean value false is passed as the property value, which is the expected type for the animated property in the component.

[jrgarciadev]

Hey guys sorry for the delay please upgrade to V2, use disableRipple property.

[mxvsh]

is there any way to disable ripple globally?

[mxvsh]

anyone?

[Eppu]

I don't believe there's a global setting for it built in. You could probably create a wrapper component where you disable ripple by default, or maybe take a look at using the useButton hook.

[wingkwong]

in NextUIProvider, you can set disableRipple to true.