Base

import { Base } from 'primer-react-prototype'

import React from 'react';
import { SystemStyleObject } from 'styled-system';
import { Base, SxProp } from './Base';
import { ForwardRefComponent } from './polymorphic';
import { common, CommonSystemProps, forwardSystemProps } from './system-props';
const defaultElement = 'div';
type Size = 'small' | 'large';
export type ExampleProps = SxProp &
  CommonSystemProps & {
    size?: Size;
  };
type ExampleComponent = ForwardRefComponent<
  typeof defaultElement,
  ExampleProps
>;
const sizes: Record<Size, SystemStyleObject> = {
  small: {
    px: 3,
    py: 2,
  },
  large: {
    px: 4,
    py: 2,
  },
};
export const Example = React.forwardRef(
  ({ as = defaultElement, size = 'small', ...props }, ref) => {
    return (
      <Base
        as={as}
        ref={ref}
        {...forwardSystemProps(props, common)}
        __css={{
          // theme-aware styles that can be overriden by system props or the `sx` prop
          bg: 'bg.primary',
          ...sizes[size],
        }}
      />
    );
  }
) as ExampleComponent;

API Reference

Base