# 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.
* [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.
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);
}
```
```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
```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` |
