---
title: Ripple
description: "`Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/ripple/ripple.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/ripple
---

# Ripple

`Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.

```tsx
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>
)
```

:::warning
You need to set `position: relative` and `overflow: hidden` on the parent element of `Ripple`.
:::

## Usage

```tsx
import { Ripple, useRipple } from "@yamada-ui/react"
```

```tsx
import { Ripple, useRipple } from "@/components/ui"
```

```tsx
import { Ripple, useRipple } from "@workspaces/ui"
```

```tsx
<Ripple />
```

### Change the Color

To change the color, set a color to `color`. By default, `currentColor` is set.

```tsx
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>
)
```

### Disable Ripple

To disable, set `disabled` to `true`.

```tsx
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>
)
```

Alternatively, you can disable it by setting `disabled` to `true` on `Ripple`.

```tsx
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>
)
```

## 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](https://yamada-ui.com/docs/components/airy.md): `Airy` is a component that provides a smooth animation to switch between two elements.
- [Flip](https://yamada-ui.com/docs/components/flip.md): `Flip` is a component that provides an animation to switch between two elements while flipping.
- [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`.
- [Rotate](https://yamada-ui.com/docs/components/rotate.md): `Rotate` is a component that provides an animation to switch between two elements while rotating.
- [Collapse](https://yamada-ui.com/docs/components/collapse.md): `Collapse` is a component that allows you to expand or collapse an element for display.
- [Fade](https://yamada-ui.com/docs/components/fade.md): `Fade` is a component that gradually shows or hides an element.
- [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element.
- [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): `Skeleton` is a component that acts as a placeholder until content is loaded.

## Uses Components & Hooks

- [Motion](https://yamada-ui.com/docs/components/motion.md): `Motion` is a convenient component that extends the Yamada UI Style Props to `Motion`.

## Used By Components & Hooks

- [Button](https://yamada-ui.com/docs/components/button.md): `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.