> For the complete documentation index, see [llms.txt](https://valence.isaacshea.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://valence.isaacshea.com/core-concepts/polymorphism.md).

# Polymorphism

Last updated: 2.0.0 (22/01/2024)

Polymorphism is a complex subject, and is currently a weak point of Valence's type-checking systems. Dive into this subject at your own risk.

Polymorphism allows select Valence components to take different element form on the DOM, affording the components unique attributes and functionality that are usually disallowed by React or HTML.

Valence has three primary polymorphic components:

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Polymorphic Button</strong></td><td>Default: <code>button</code></td><td></td><td><a href="/valence-utils/polymorphism/polymorphic-button.md">Polymorphic Button</a></td></tr><tr><td></td><td><strong>Polymorphic Layout</strong></td><td>Default: <code>div</code></td><td><a href="/valence-utils/polymorphism/polymorphic-layout.md">Polymorphic Layout</a></td></tr><tr><td></td><td><strong>Polymorphic Text</strong></td><td>Default: <code>p</code></td><td><a href="/valence-utils/polymorphism/polymorphic-text.md">Polymorphic Text</a></td></tr></tbody></table>

## Usage

To use polymorphism on compatible components, simply use the `component` prop to change the underlying DOM component.

```tsx
import { Button } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Button 
            component="a"
            href="https://isaacshea.com"
        >
            Go to Isaac's website!
        </Button>
    )
}
```

{% hint style="info" %}
You may encounter TypeScript errors if you are using unusual props on polymorphic components. If you are *sure* everything works, simply add a `//@ts-ignore` to the line above to get TypeScript to calm down.
{% endhint %}

## When can I use this?

Every component that at some point extends the `PolymorphicTextProps`, `PolymorphicButtonProps` or `PolymorphicLayoutProps` will support polymorphism, which generally includes:

* All buttons
* [Flex](/valence-core/components/layout/flex.md), [Grid ](/valence-core/components/layout/grid.md)& all derivative components
* [Modal](/valence-core/components/overlays/modal.md) & [Sheets](/valence-core/components/overlays/sheets/dynamic-sheet.md)

## What is the `link` component?

The `component="link"` prop sets the underlying element to a [react-router-dom](https://reactrouter.com/en/main/components/link)-compatible `Link` component, allowing it to interact with the React Router API.