Slots in components

This is a [[designpatterns]] that's pretty common in Figma, but can also be helpful in components, or just [[react]] generally.

It's an API pattern that allows you to pass elements to a component, and the component will render them in the correct spot, usually with some boilerplate in between. The children prop is effectively an un-named slot.

A common example is something like Card, which could accept a header and content prop. This allows Card to be opinionated about its overall styling, but also any styling in between where the slots are rendered.

<Card
  header={<h1>title</h1>}
  content={<p>Content</p>}
  footer={<a href="#">Read more</a>}
/>

Personally, I don't use the API too much as it's a bit clunky. I usually tend for [[20220801045634-design-system-subcomponents]].

[[20210908155508-flexibility-components]]

[[componentapi]] [[components]] [[designsystem]] [[designsystemapi]] [[figma]]