Adding data with slots

Slots are sections of a component that are meant for component instances to fill in with arbitrary content. They are like “holes” in a component.

For example, a Button component may be responsible for the border / background / font color / etc., but it can be customized with any button content. One Button can say “OK,” another “Cancel,” and another an icon alongside “Submit.”

Usually slots have default content. The Button’s default slot might just be “Button text here.”

Components can also have multiple slots. A Card component might have a header slot and a body slot.

To create a slot, right-click any element and choose “Convert To Slot.” This exposes a slot on the component that element belongs to. The element you converted becomes the default content for the slot.

Then, wherever you have an instance of that component, you can directly manipulate the slot contents. For instance, you can simply double click on the Button’s text to type in something else.

If you don’t override the slot, it will always reflect the current default contents (i.e. it reflects the update you made to the default contents).

Slots can be compared with overrides in other design tools, but with key differences:

• Slots are a way to override that is officially blessed by the component author. This is critical to allowing a design system to scale and to informing component consumers what are appropriate ways to override a component.
• Slots allow flexible component composition. It should be easy to plug in arbitrary content into a slot, including multiple other elements and components.

Creating a slot

To create a slot, right-click any element and choose “Convert To Slot.” This exposes a slot on the component that element belongs to. The element you converted becomes the default content for the slot.

Then, wherever you have an instance of that component, you can directly manipulate the slot contents. For instance, you can simply double click on the Button’s text to type in something else.

If you don’t override the slot, it will always reflect the current default contents (i.e. it reflects the update you made to the default contents).

Slots can be compared with overrides in other design tools, but with key differences:

• Slots are a way to override that is officially blessed by the component author. This is critical to allowing a design system to scale and to informing component consumers what are appropriate ways to override a component.
• Slots allow flexible component composition. It should be easy to plug in arbitrary content into a slot, including multiple other elements and components.

Have feedback on this page? Let us know on our forum.