The asChild Prop
Used to compose a component's functionality onto its child element. This approach, inspired by Radix UI, offers maximum flexibility.
<Button asChild>
<Link href="/some-page">Open</Link>
</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
const MyComponent = forwardRef((props, ref) => {
return <Box ref={ref} {...props} />
})
<Button asChild>
<MyComponent> Click me </MyComponent>
</Button>The Text Component
The Text component allows you to change the underlying HTML element that a React component renders via the as prop. It provides a straightforward way to change the underlying element while retaining the component's functionality.
This is to help reduce the amount of JSX you need to write for typography driven UI.
<Text as="h3">Hello, world!</Text>Warning
This is only available for the Text component which is a wrapper around our text-related patterns.