Polymorphic Components

Learn how to create an adaptable Box component for diverse HTML block elements.

We'll cover the following

A polymorphic component is designed to be rendered as different HTML elements or components while maintaining the same properties and behaviors. It allows us to specify a prop to determine its rendered element type.

Creating the Box component

Earlier, we told you that, over the course of building out a large application, we tend to end up making a few wrappers around components. Box is the first wrapper around the basic block elements in HTML (such as <div>, <aside>, <section>, <article>, <main>, <head>, and so on). But just as we don’t want to lose all the semantic meaning we get from these tags, we also don’t need multiple variations of Box that are the same. What we’d like to do is use Box but also be able to specify what it ought to be under the hood.

Here’s an example of a Box component from Paste—Twilio’s design systemTwilio's Paste is a design system that provides a unified and consistent set of UI components for building seamless and branded user interfaces across Twilio applications.:

Get hands-on with 1400+ tech skills courses.