1---
2title: Use Compound Components Over Polymorphic Children
3impact: MEDIUM
4impactDescription: flexible composition, clearer API
5tags: design-system, components, composition
6---
7 
8## Use Compound Components Over Polymorphic Children
9 
10Don't create components that can accept a string if they aren't a text node. If
11a component can receive a string child, it must be a dedicated `*Text`
12component. For components like buttons, which can have both a View (or
13Pressable) together with text, use compound components, such a `Button`,
14`ButtonText`, and `ButtonIcon`.
15 
16**Incorrect (polymorphic children):**
17 
18```tsx
19import { Pressable, Text } from 'react-native'
20 
21type ButtonProps = {
22  children: string | React.ReactNode
23  icon?: React.ReactNode
24}
25 
26function Button({ children, icon }: ButtonProps) {
27  return (
28    <Pressable>
29      {icon}
30      {typeof children === 'string' ? <Text>{children}</Text> : children}
31    </Pressable>
32  )
33}
34 
35// Usage is ambiguous
36<Button icon={<Icon />}>Save</Button>
37<Button><CustomText>Save</CustomText></Button>
38```
39 
40**Correct (compound components):**
41 
42```tsx
43import { Pressable, Text } from 'react-native'
44 
45function Button({ children }: { children: React.ReactNode }) {
46  return <Pressable>{children}</Pressable>
47}
48 
49function ButtonText({ children }: { children: React.ReactNode }) {
50  return <Text>{children}</Text>
51}
52 
53function ButtonIcon({ children }: { children: React.ReactNode }) {
54  return <>{children}</>
55}
56 
57// Usage is explicit and composable
58<Button>
59  <ButtonIcon><SaveIcon /></ButtonIcon>
60  <ButtonText>Save</ButtonText>
61</Button>
62 
63<Button>
64  <ButtonText>Cancel</ButtonText>
65</Button>
66```
67