# Ripple **This documentation is fully rendered on the [Material Web catalog](https://material-web.dev/components/ripple/)** Ripples are [state layers](https://m3.material.io/foundations/interaction/states/state-layers) used to communicate the status of a component or interactive element. A state layer is a semi-transparent covering on an element that indicates its state. A layer can be applied to an entire element or in a circular shape. Two containers that display a bounded and unbounded ripple on interaction. * [Design article](https://m3.material.io/foundations/interaction/states/state-layers) * [API Documentation](#api) * [Source code](https://github.com/material-components/material-web/tree/main/ripple) ## Usage Ripples display on hover and press pointer interactions. They may be attached to a control in one of three ways. ![A container that displays a bounded ripple on interaction.](images/ripple/usage.gif "A bounded ripple.") 1. Attached to the parent element ```html ``` 1. Attached to a referenced element ```html
``` 1. Attached imperatively ```html
``` > Note: ripples must be placed within a `position: relative` container. ### Unbounded To create an unbounded circular ripple centered on an element, use the following styles. ```css .container { display: flex; place-content: center; place-items: center; position: relative; } md-ripple.unbounded { border-radius: 50%; inset: unset; height: var(--state-layer-size); width: var(--state-layer-size); } ``` ![A circular container with an inner circle that displays an unbounded ripple around it on interaction.](images/ripple/usage-unbounded.gif "An unbounded ripple.") ```html ``` ## Accessibility Ripples are visual components and do not have assistive technology requirements. ## Theming Ripples support [Material theming](../theming/README.md) and can be customized in terms of color. ### Tokens Token | Default value ------------------------ | ------------------------ `--md-ripple-hover-color` | `--md-sys-color-on-surface` `--md-ripple-pressed-color` | `--md-sys-color-on-surface` * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-ripple.scss) ### Example ![Image of a ripple with a different theme applied](images/ripple/theming.gif "Ripple theming example.") ```html ``` ## API ### MdRipple <md-ripple> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `disabled` | `disabled` | `boolean` | `false` | Disables the ripple. | | `htmlFor` | | `string` | `undefined` | | | `control` | | `HTMLElement` | `undefined` | | #### Methods | Method | Parameters | Returns | Description | | --- | --- | --- | --- | | `attach` | `control` | `void` | | | `detach` | _None_ | `void` | |