Component Composition vs 'Prop Explosion'

A major failure pattern in component libraries is Prop Explosion (also known as the God Component). A developer wants a Card to support an icon, so they add hasIcon. Another wants a subtitle, so they add subtitle. Another wants a badge, a footer button, an avatar, and a secondary action:

// ❌ ANTI-PATTERN: Prop Explosion (Rigid & Fragile)
<Card
  title="Pro Plan"
  hasIcon={true}
  iconName="star"
  badgeText="Popular"
  badgeColor="green"
  buttonText="Upgrade"
  showFooterBorder={false}
/>

The Remedy: Compound Components (Composition)

// ✅ BEST PRACTICE: Compound Composition (Flexible & Resilient)
<Card>
  <Card.Header>
    <Icon name="star" />
    <Card.Title>Pro Plan</Card.Title>
    <Badge variant="success">Popular</Badge>
  </Card.Header>
  <Card.Footer>
    <Button variant="primary">Upgrade</Button>
  </Card.Footer>
</Card>

Composition allows consuming squads to assemble components freely without asking the design system team to add new boolean flags for every permutation.