# Polymorphism

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">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">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">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](https://valence.isaacshea.com/valence-core/components/layout/flex), [Grid ](https://valence.isaacshea.com/valence-core/components/layout/grid)& all derivative components
* [Modal](https://valence.isaacshea.com/valence-core/components/overlays/modal) & [Sheets](https://valence.isaacshea.com/valence-core/components/overlays/sheets/dynamic-sheet)

## 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.