It's not really a new thing and you probably noticed it to be used in e.g. react-router. With "Component" property, the Dashboard UI Kit components are nicely composable which makes them super flexible in terms of reusability.
Many components, such as Button, accept "Component" property. You will always find that information on the documentation page for each component or in the code. So let's have a look on some examples with Button component.
<Button>This is a simple button</Button>
Outputs:
<button class="btn" type="button" role="button">This is a simple button</button>
But what if we want to render "a" or anything else with the same styling?
You can pass e.g. a or span as a prop value (or any valid html tag that makes sense). Here is a simple example:
<Button primary Component="a" href="#">This is a link button</Button>
Outputs:
<a class="btn btn-primary" href="#" role="button">This is a link button</a>
Of course, you can pass any React component as a prop value as well. The simples example would be Link from react-router-dom to render, because we want the button styled link to navigate to a different page.
import { Link } from 'react-router-dom' ... <Button primary Component={Link} to="#">Next Page</Button>
Outputs:
<a class="btn btn-primary" role="button" href="/docs/react/component-property">Next Page</a>