Slots (Component Composition Pattern)

Slots are a composition pattern that lets components accept and render child content in predefined placeholders, rather than prescribing a fixed DOM structure. They separate structure (the component shell) from content (what gets placed inside).

In frameworks like Vue or web components, slots are native syntax: <slot></slot> marks where children go. In React, the equivalent is passing children or named props. A Button might have a leading icon slot, a label slot, and a trailing icon slot — the component controls layout and styling; the caller decides what goes where.

The benefit for Design Systems is composability without explosion. Instead of ButtonWithIcon, ButtonWithIconAndBadge, ButtonWithDropdown, you have one Button that accepts slots. Callers combine content as needed. This keeps the component library lean and the system flexible.

Slots are often paired with a compound pattern — a Dialog with Trigger, Header, Body, and Footer slots, where each is a separate component that coordinates through context or state. This pattern dominates modern design systems because it's powerful enough for 90% of use cases without forcing either rigid APIs or chaotic flexibility.

The discipline is naming. Slots need clear semantics: leading, trailing, header, footer. Unnamed slots (just children) work fine for simple components but become confusing as complexity grows.

Related: Composability · Component · Component API · Compound pattern vs composite pattern · Headless components