TypeScript

Namespaces

Base UI uses namespaces to organize types. Every component has two core interfaces:

• Props (such as Tooltip.Root.Props)
• State (such as Tooltip.Root.State)

Props

When creating wrapping components, you can use the Props type to accept all of the underlying Base UI props for the component.

import { Tooltip } from 'base-ui-solid/tooltip';

function MyTooltip(props: Tooltip.Root.Props) {
  return <Tooltip.Root {...props} />;
}

State

The State type is the internal state of the component. For example, Positioner components (such as <Popover.Positioner>) have state that describes the position of the element in relation to their anchor.

function renderPositioner(props: Popover.Positioner.Props, state: Popover.Positioner.State) {
  return (
    <div {...props}>
      <ul>
        <li>The popover is {state.open ? 'open' : 'closed'}</li>
        <li>I am on the {state.side} side of the anchor</li>
        <li>I am aligned at the {state.align} of the side</li>
        <li>The anchor is {state.anchorHidden ? 'hidden' : 'visible'}</li>
      </ul>
      {props.children}
    </div>
  );
}

<Popover.Positioner render={renderPositioner} />;

Events

Types relating to custom Base UI events are also exported on component parts’ namespaces.

• ChangeEventDetails (such as Combobox.Root.ChangeEventDetails) is the object passed to change handlers like onValueChange.
• OpenChangeEventDetails (such as Combobox.Root.OpenChangeEventDetails) is the object passed to onOpenChange on components whose ChangeEventDetails is shared with other handlers. It extends ChangeEventDetails with preventUnmountOnClose().
• ChangeEventReason (such as Combobox.Root.ChangeEventReason) is the union of possible reason strings for a change event.

function onValueChange(value: string, eventDetails: Combobox.Root.ChangeEventDetails) {
  console.log(value, eventDetails);
}

function onOpenChange(open: boolean, eventDetails: Combobox.Root.OpenChangeEventDetails) {
  console.log(open, eventDetails);
}

Other accessible types

Depending on the component API, other types are also exported on component parts or utility functions. The following list is non-exhaustive, and each of these are documented where necessary.

• Popups have an actionsRef prop to access imperative methods. For example, Menu.Root.Actions gives access to the shape of the actionsRef object prop on <Menu.Root>.
• The toast object on <Toast.Root> is a complex object with many properties. Toast.Root.ToastObject gives access to this interface.
• Components that have a render prop have an extended JSX.IntrinsicElements type, enhanced with a render prop. The useRender.ComponentProps type on the function gives access to this interface.