<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Component Demos should be present on the corresponding Component API sections.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Component Demos and Component API are separated in docs.</p>
<h2 dir="auto">Context</h2>

<p dir="auto">While reading the docs <a href="https://material-ui-next.com/" rel="nofollow">https://material-ui.com/</a>, I find myself with two windows open, the Component Demo and the corresponding Component API. I see the two sections aren't exactly 1:1, however I'm guessing the goal is to have a demo for every Component.</p>
<p dir="auto">There will be a need for compositional demos, much like Semantic's <a href="https://semantic-ui.com/views/comment.html" rel="nofollow">Views docs</a>. These demos can be linked to on each Component API doc page and indexed in a Composed Components top level nav.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>next</td>
</tr>
<tr>
<td>React</td>
<td></td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">The Issue</h2>
<p dir="auto">When I provide <code class="notranslate">NavLink</code> as a component for <code class="notranslate">Button</code> it seems to work fine but I get this error in console :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Material-UI: you have provided a custom Component to the `component` property of `ButtonBase`.
In order to make the keyboard focus logic work, we need a reference on the root element.
Please provide a class component instead of a functional component.
You need to fix the: NavLink component."><pre class="notranslate"><code class="notranslate">Warning: Material-UI: you have provided a custom Component to the `component` property of `ButtonBase`.
In order to make the keyboard focus logic work, we need a reference on the root element.
Please provide a class component instead of a functional component.
You need to fix the: NavLink component.
</code></pre></div>
<p dir="auto">providing <code class="notranslate">Link</code>  works fine without errors.</p>
<p dir="auto">Here is a sandbox demo : <a href="https://x0n7x11vw.codesandbox.io/" rel="nofollow">https://x0n7x11vw.codesandbox.io/</a></p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.beta-10</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
</tbody>
</table>