Polymorphic as

A primitive can be visually correct while its default root is not the right document landmark or content element. The as prop preserves computed styling, className, style, sx, accessibility attributes, events, and children while changing that root.

tsximport { Box, Card, Text } from "@tavojs/ui";

export const ReleaseNotes = () => {
  return (
    <Box as="main" maxWidth="lg" center fullWidth>
      <Text as="h1" variant="h1">Release notes</Text>
      <Card as="article" title="Version 0.1">Framework and UI changes</Card>
    </Box>
  );
};

Inputs, table parts, menus, dialogs, and other structured components depend on native elements or compound composition. Use the dedicated component instead of turning a generic Box into a field or control.

• Prefer TextInput over Box as an input.

• Prefer Button over a clickable Box.

• Prefer Table compound members over manually styled row containers.

• Prefer Link for navigation and Button for actions.

• Do not change the root of a component whose reference page does not document as support.

Changing the root changes native behavior. Keep heading levels meaningful, label repeated landmarks, provide button types inside forms, and make custom navigation adapters forward computed props to their actual root.

Single-root primitives that expose as use it in place of the component default. A custom component receives the generated className, style, children, accessibility attributes, events, and remaining public props and must forward them to its real root.

• Changing the root changes native behavior; styling does not recreate button, link, landmark, or heading semantics.

• Do not replace owned input, table, dialog, or menu structure with as.

• Button does not infer anchor rendering from href. Use as="a" or a routing adapter.

• When a disabled Button renders as an anchor or custom component, href is removed, aria-disabled is set, and tabIndex becomes -1.