Design System Glossary

Polymorphic components

Polymorphic components are components that can render as different underlying HTML elements without changing their styling or behaviour. The classic pattern is <Button as="a" href="..." /> — a button-shaped element that's actually a link, with the right semantics for keyboard and assistive tech.

Polymorphism is how a small component library covers a wide surface area: one <Text> component renders as <h1>, <p> or <span> as needed; one <Button> becomes a link when given an href. Radix UI's asChild prop is a more rigorous version of the same idea — pass any element and Radix merges its props into yours. The pattern is essential when accessibility demands the right tag, not just the right look.