Ripple
Ripple is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.
const { onClick, ...rippleProps } = useRipple()
return (
<Center
as="button"
type="button"
onClick={onClick}
h="10"
px="3"
bg="bg.contrast"
color="fg.contrast"
rounded="l2"
position="relative"
overflow="hidden"
>
<Text>Button</Text>
<Ripple {...rippleProps} />
</Center>
)
If you use this code, you need to add
"use client" to the top of the file.You need to set
position: relative and overflow: hidden on the parent element of Ripple.Usage
import { Ripple, useRipple } from "@yamada-ui/react"
import { Ripple, useRipple } from "@/components/ui"
import { Ripple, useRipple } from "@workspaces/ui"
<Ripple />
Change the Color
To change the color, set a color to color. By default, currentColor is set.
const { onClick, ...rippleProps } = useRipple()
return (
<Center
as="button"
type="button"
onClick={onClick}
h="10"
px="3"
bg="bg.contrast"
color="fg.contrast"
rounded="l2"
position="relative"
overflow="hidden"
>
<Text>Button</Text>
<Ripple color="warning" {...rippleProps} />
</Center>
)
If you use this code, you need to add
"use client" to the top of the file.Disable Ripple
To disable, set disabled to true.
const { onClick, ...rippleProps } = useRipple({ disabled: true })
return (
<Center
as="button"
type="button"
onClick={onClick}
h="10"
px="3"
bg="bg.contrast"
color="fg.contrast"
rounded="l2"
position="relative"
overflow="hidden"
>
<Text>Button</Text>
<Ripple {...rippleProps} />
</Center>
)
If you use this code, you need to add
"use client" to the top of the file.Alternatively, you can disable it by setting disabled to true on Ripple.
const { onClick, ...rippleProps } = useRipple()
return (
<Center
as="button"
type="button"
onClick={onClick}
h="10"
px="3"
bg="bg.contrast"
color="fg.contrast"
rounded="l2"
position="relative"
overflow="hidden"
>
<Text>Button</Text>
<Ripple disabled {...rippleProps} />
</Center>
)
If you use this code, you need to add
"use client" to the top of the file.