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.

Props

Prop	Default	Type / Description
`as`	-	`DOMElement` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`onClear`	-	`(key: Key) => void` The callback invoked when a ripple is cleared.
`ripples`	-	`RippleOptions[]` The ripples to use.
`disabled`	`false`	`boolean` If `true`, disable ripple effects when pressing a element.

Similar Components

Airy is a component that provides a smooth animation to switch between two elements.

Flip is a component that provides an animation to switch between two elements while flipping.

Motion is a convenient component that extends the Yamada UI Style Props to Motion.

Rotate is a component that provides an animation to switch between two elements while rotating.

Collapse is a component that allows you to expand or collapse an element for display.

Fade is a component that gradually shows or hides an element.

FadeScale is a component that gradually scales up to reveal or scales down to hide an element.

Skeleton is a component that acts as a placeholder until content is loaded.

Uses Components & Hooks

Motion is a convenient component that extends the Yamada UI Style Props to Motion.

Used By Components & Hooks

Button is an interactive component that allows users to perform actions such as submitting forms and toggling modals.