Function Text

packages/react/src/ui/Text/Text.tsx:18–38

({ className, level, color, size, align, weight, tracking, leading, ...props })

const variants = createVariants(styles);

export const Text: FC<Props> = ({ className, level, color, size, align, weight, tracking, leading, ...props }) => {
  const Tag = level ? (`h${level}` as keyof JSX.IntrinsicElements) : 'p';

  return (
    <Tag
      className={variants('text', {
        className,
        size,
        align,
        weight,
        tracking,
        leading,
        ...(color?.startsWith('#') ? {} : { color }),
      })}
      style={{
        ...(color?.startsWith('#') ? { color } : {}),
      }}
      {...props}
    />
  );
};