design system compound components

Use Compound Components Over Polymorphic Children

Don't create components that can accept a string if they aren't a text node. If a component can receive a string child, it must be a dedicated *Text component. For components like buttons, which can have both a View (or Pressable) together with text, use compound components, such a Button, ButtonText, and ButtonIcon.

Incorrect (polymorphic children):

type ButtonProps = {
  children: string | React.ReactNode
  icon?: React.ReactNode
}

function Button({ children, icon }: ButtonProps) {
  return (
    
      {icon}
      {typeof children === 'string' ? {children} : children}
    
  )
}

// Usage is ambiguous
}>Save
Save

Correct (compound components):

function Button({ children }: { children: React.ReactNode }) {
  return {children}
}

function ButtonText({ children }: { children: React.ReactNode }) {
  return {children}
}

function ButtonIcon({ children }: { children: React.ReactNode }) {
  return <>{children}</>
}

// Usage is explicit and composable

  
  Save

  Cancel