Slots

A slot is a region inside a component where each instance can have its own content. Use an override to change a button’s label; use a slot to put a button, a row of actions, or other layers inside a card.

The component defines the slot’s layout. The content you add belongs to that instance, so two Card instances can share a structure and have different actions.

Create a Slot

1. Create a frame and turn it into a component
2. Add an empty frame inside the component origin and name it for its role, such as Actions
3. Set the frame’s layout and sizing for the content it will hold
4. Select the empty frame and click Make slot at the top of the properties panel

Only empty frames in component origins can be turned into slots. Slots have diagonal lines on the canvas to show where content can be added.

Suggested Slot Components

Suggestions help you and your agent choose content for the slot. A Card’s Actions slot can suggest a Button; a Table’s slot can suggest a Table row.

1. Select the slot in the component origin
2. Click + beside Slot in the properties panel
3. Choose the components you want to suggest

Suggestions do not restrict the slot to those components.

Drop Elements into Slots

1. Insert a component instance
2. Select its slot and click a suggested component under Slot in the properties panel

You can also drag and drop or copy and paste an element into the slot. Edit that content in the instance to give it the text and appearance the screen needs.

To change the shared layout of the slot, edit the component origin. To change one instance’s contents, edit that instance. Layers inherited from the origin outside a slot cannot be freely reparented inside the instance.

Follow Build a small design system to create a Card with an Actions slot and use it in two themed instances.