title: Stop parent component ripple being triggered from child component
body: <p>Let's say I have a simple code like: </p>
  
  <pre><code>
  &lt;ListItem
    button={true}
  &gt;
    &lt;Typography variant='caption' color='primary'&gt;
              {value}
    &lt;/Typography&gt;
    &lt;Button
      onClick={foo}
    &gt;
      Button
    &lt;/Button&gt;
  &lt;/ListItem&gt;
  </code></pre>
  
  <p>When I click anything inside the ListItem the ripple effect is trigger, which is ok, but when I click the button I don't want the ripple effect of the parent component to be triggered. How do I do that?</p>