Ripple

Demo

Disable Focus State Layer

Code

<div style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px;" tabindex="0">
    <mdc-ripple></mdc-ripple>
</div>

<div style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px;" tabindex="0">
    <mdc-ripple disable-focus-state-layer></mdc-ripple>
</div>

Disable Hover State Layer

Code

<div style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px;" tabindex="0">
    <mdc-ripple></mdc-ripple>
</div>

<div style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px;" tabindex="0">
    <mdc-ripple disable-hover-state-layer></mdc-ripple>
</div>

Disable Press State Layer

Code

<div style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px;" tabindex="0">
    <mdc-ripple></mdc-ripple>
</div>

<div style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px;" tabindex="0">
    <mdc-ripple disable-press-state-layer></mdc-ripple>
</div>

Disabled

Code

<div style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px;" tabindex="0">
    <mdc-ripple></mdc-ripple>
</div>

<div style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px;" tabindex="0">
    <mdc-ripple disabled></mdc-ripple>
</div>

Ignore Global Config

Code

<div style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px;" tabindex="0">
    <mdc-ripple></mdc-ripple>
</div>

<div style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px;" tabindex="0">
    <mdc-ripple ignore-global-config></mdc-ripple>
</div>