When creating a composed component you might want to use a component as a prop or allow a user to not use a component in the composition if they choose not to. This is where slots come in.
For example, let's look at the
Card component. Its composition includes several nested boxes an image and some typography. Now we want a user to be able to add either an image, SVG, or an icon in the place where the image is located but we want it to be accessible out of the composition but render in the same place.
If we select the components
Component Configuration menu we will have a modal with an option to add
After selecting the
+ icon I named the slot
I can now move my media slot to where I want it to render in my tree in this case where the image component is located. The image has also been removed as we will add it to our new media slot outside of the composition.
x on the
Card component to close the composition. Now we see the media slot in the tree as a child to the
Image or your media of choice and it will now render in your components composition where you placed the
Slots are created on the component configuration.
They are not associated directly with a property in the UI.
They support passing vars down.
Updated 14 days ago