Tips and tricks: nesting vs. combining via polymorphism

The design system components have this ability where you can render one component as a certain HTML tag:

<Stack as="ul">
  {tasks.map((task) => (
    <Box as="li" key={task.id}>{task.content}</Box>
  )}
</Stack>

The main purpose is to be able to take advantage of the new components while at the same time not dropping the ball on using semantic HTML.

However, it can also be used to render as another React component:

// Link below can be thought of as the Link component in react-router
<ButtonLink as={Link}>
  Click me
</ButtonLink>

This is useful to be able to get the functionality of one component with the visuals and functionality of another component. In the example above we render a link that has the visual look and feel of a Button from our design system, but in which the link functionality is provided by react-router, allowing this link to perform SPA-like navigation on the client-side instead of a full server round trip.

Caveats

TODO:

• Document caveats where the two components' functionalities or styling can clash with one another.