Examples

Default Span

Without an `as` prop, Polymorph renders as a span.

Default (span)

I am a span

import { Polymorph } from "@g4rcez/components";

function DefaultSpan() {
  return <Polymorph>I am a span</Polymorph>;
}

Custom Element

Pass `as` to change the rendered element. All native props of the target element are accepted.

As different elements

Heading 1

Paragraph text

Section block

import { Polymorph } from "@g4rcez/components";

function CustomElement() {
  return (
    <div className="flex flex-col gap-4">
      <Polymorph as="h1" className="text-2xl font-bold">Heading 1</Polymorph>
      <Polymorph as="p" className="text-secondary">Paragraph text</Polymorph>
      <Polymorph as="section" className="border border-card-border rounded p-4">
        Section block
      </Polymorph>
    </div>
  );
}

As Interactive Element

Polymorph as a button, forwarding all button-specific props including onClick and disabled.

As button

import { Polymorph } from "@g4rcez/components";

function AsButton() {
  return (
    <div className="flex gap-4">
      <Polymorph
        as="button"
        type="button"
        className="rounded px-4 py-2 bg-primary text-primary-foreground"
        onClick={() => alert("Clicked")}
      >
        Click me
      </Polymorph>
      <Polymorph
        as="button"
        type="button"
        disabled
        className="rounded px-4 py-2 bg-muted text-disabled"
      >
        Disabled
      </Polymorph>
    </div>
  );
}

When to use Polymorph

Use when

You need the documented Polymorph interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Polymorph behavior you need.

Accessibility

Keep the Polymorph labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.