Material design Ink is used to show that an element has been touched, clicked or has focus.

Ink can be disabled on an app level by defining either inkDisabled or inkDisabledInteractions as a context type. Example:

import inkContextTypes from 'react-md/lib/Inks/inkContextTypes';

class App extends React.Component {
  static childContextTypes = inkContextTypes;
  getChildContext() {
    // Only disable the mouse and keyboard ink effects
    // return { inkDisabledInteractions: ['mouse', 'keyboard'] };

    // Any ink interaction is disabled
    return { inkDisabled: true };

See the inkDisabled and disabledInteractions

Ink can be created with the HOC (higher order component) that will provide an ink prop to the child component. If the component is disabled or inkDisabled is provided to the component, the ink will not be injected. In addition, the 'touch', 'mouse', and/or 'keyboard' triggers can be disabled.

To get an ink displayed correctly, your component must specify position: relative so that the ink will be contained.

This example will show how you can disable ink at an application level by defining context that will disable it. This can not be done dynamically since there are many ways to block context updates on child components. When the ink is disabled, most of the components will have no keyboard indication that it is focused, so it is up to you to display something.


  • Item 1
  • Item 2
  • Item 3
  • Item 4


Selection Controls