When another prop is no longer enough
A growing list of props can make a shared component harder to understand. Composition gives different content its own place while keeping useful constraints.
Alexander Claes3 min read
A card component often starts with a few straightforward props. It needs a title, an image and a link. Each value has a clear place, and the component keeps the presentation consistent.
Then another screen needs a badge. A third needs two action buttons, while a fourth needs a different footer. Adding a prop for each request feels reasonable, but the component gradually becomes harder to understand.
The question is whether those props still describe a useful set of choices, or whether they are becoming instructions for building several different interfaces.
When the options start interacting
A prop such as size is easy to follow when it selects from a few supported sizes. Things become less clear when showFooter, compactActions and stackButtons affect one another.
The difficulty is not simply the number of props. It is knowing which combinations make sense and what each combination will render. A small change can mean checking several branches inside the component before understanding what appears on screen.
For the card, a useful warning sign is when adding a different action requires changing the shared component again. The outer structure has stayed the same, but the component keeps collecting knowledge about the screens using it.
Giving the content its own place
Composition offers another way to organise that responsibility. The card can own its border, spacing and content regions, while the screen provides what belongs inside them.
Instead of passing flags for every footer variation, the caller could supply the footer content directly. One card might contain a link, another a pair of buttons. The card no longer needs a separate condition for each arrangement.
This keeps the shared structure useful without asking it to understand every action. It can also make the caller easier to read: the buttons are visible where the card is used, rather than implied by a collection of options.
Keeping useful constraints
Suppose every card should have its buttons aligned to the right, with the same spacing. With a footer slot, each screen can supply those buttons differently. One might stack them, while another adds extra margins.
The card can provide a place for the footer, but a slot does not stop callers from changing the layout inside it.
If that layout needs to stay consistent, the card can create the buttons itself. Each screen supplies the actions and their labels, and the card decides how to arrange them.
Props are still useful for choices such as a button's size or colour variant. They keep a small set of options easy to use. Composition helps when the content needs to vary more than those options allow.
The aim is to keep each component easy to understand. Sometimes that means another prop. Sometimes it means letting the caller supply part of the content.