You will often want to pass additional content to your components. You can do this via Slots. In it's most basic form, to render content inside a component, use the <Children />
slot component:
<a class="btn" :href="href">
<Children />
</a>
This is good, but what if we want to allow an icon to be placed inside the button? We could offer an icon
prop, but this may become an issue for customisability. Instead, we can include slots before and after the main content:
<a class="btn" :href="href">
<Children slot="before" />
<Children />
<Children slot="after" />
</a>
Here's how this would look if we were to pass an icon before the main content:
<Button href="/contact">
<Slot name="before">
<Icon name="phone" />
</Slot>
Contact Us
</Button>