Polymorphic components

Some Pigment components accept a special as prop that lets you change the root element.

This allows you to attach a component accessibility and functional requirements onto your own element instead.

With HTML elements

You can use any HTML element with the as prop. For example, a tag will render an anchor:

tsx
import { MenuTrigger } from "@kobalte/pigment";
function App() {
  return (
    <MenuTrigger as="a" href="/">
      Trigger
    </MenuTrigger>
  );
}

tsx
import { MenuTrigger } from "@kobalte/pigment";
function App() {
  return (
    <MenuTrigger as="a" href="/">
      Trigger
    </MenuTrigger>
  );
}

With other components

You can also use polymorphic components with any other component. For example, with @solidjs/router Link:

tsx
import { As, MenuTrigger } from "@kobalte/pigment";
import { Link } from "@solidjs/router";
function App() {
  return (
    <MenuTrigger as={Link} href="/">
      Trigger
    </MenuTrigger>
  );
}

tsx
import { As, MenuTrigger } from "@kobalte/pigment";
import { Link } from "@solidjs/router";
function App() {
  return (
    <MenuTrigger as={Link} href="/">
      Trigger
    </MenuTrigger>
  );
}