🧜‍♀️Polymorphism

Polymorphic components can render as different HTML elements while maintaining their styling and functionality. This is useful for semantic HTML, accessibility, and integrating with routing libraries.

For a conceptual overview of polymorphism, see the Polymorphism core concept.

Available polymorphic components

• Polymorphic Button - Base polymorphic button (default: button)

• Polymorphic Layout - Base polymorphic layout container (default: div)

• Polymorphic Text - Base polymorphic text element (default: p)

Usage

Use the component prop to change the underlying HTML element:

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

// Renders as an <a> tag
<Button component="a" href="https://example.com">
    External Link
</Button>

// Renders as a React Router Link
<Button component="link" to="/about">
    Internal Link
</Button>