Composition

The as Prop

Used to change the underlying HTML element that a React component renders. It provides a straightforward way to change the underlying element while retaining the component's functionality.

1
<Text as="h3">Hello, world!</Text>

The asChild Prop

Used to compose a component's functionality onto its child element. This approach, inspired by Radix UI, offers maximum flexibility.

1
<Button asChild>
2
  <Link href="/some-page">Open</Link>
3
</Button>

In this example, the asChild prop allows the link to be used as the button (e.g., a button-styled link).

Best Practices

To avoid common pitfalls when using the as and asChild props, there are a few best practices to consider:

• Forward Refs: Ensure that the underlying component forwards the ref passed to it properly.
• Spread Props: Ensure that the underlying component spreads the props passed to it.

Advanced Usage Example

1
const MyComponent = forwardRef((props, ref) => {
2
  return <Box ref={ref} {...props} />
3
})
4

5
<Button asChild>
6
  <MyComponent> Click me </MyComponent>
7
</Button>